Compose Overview

Contents

Compose is the powerhouse of Ionic app development, offering a powerful side-by-side coupling of component code and an interactive canvas for building components.

🚧 These docs are a work-in-progress. Check back frequently for updates!

Introduction

Pages and components are opened in a split view, bringing code and canvas together.

Compose mode features include:

  • Quickly navigate and hone in on code
  • Immediate feedback upon even the smallest of changes
  • Select from a rich library of elements right at your fingertips
  • Reorganize the structure of components simply by dragging them around
  • Deep understanding of the elements that make up app components
  • Focus on building the app, not fighting with the file tree
Compose Mode

Pages and Components

In Compose mode, pages and components are brought to life from the collection of files (such as TypeScript, HTML, CSS, Module, and Spec files) that represent them.

When first loaded, the page index is shown. This list comprises the pages that Ionic Studio found in the app.

Since the difference between pages and components is conceptual, Ionic Studio relies on convention to differentiate them. If there are pages missing, make sure each page follows the convention Ionic Studio is expecting:

The files that represent each page must have the proper suffixes (e.g. .page.ts, .page.html, .page.scss). See the Angular style guide for additional information about naming conventions.

Page Index

Switching to the component index reveals all the components found in the app.

Component Index

See Adding Features to create new pages and components.

Adding Features

To add features to an app, click the Add Feature button at the top left of Ionic Studio.

New Feature Button

There are several types of features available:

  • Pages
  • Components
  • Services
  • Directives
  • Route Guards
  • Pipes

Adding Components

When adding a component, Ionic Studio will prompt for the name and a page in which to register it.

New Component Modal

This adds the component as a import in the NgModule of the selected page, which allows it to be used in that page.

The same code changes are necessary to use the component in other pages. See this FAQ for details.

Template Mode

In Template mode, the code on the left and canvas on the right are synchronized. Navigating or making changes in one will update the other. The properties panel is also updated each time the selected element changes.

A great deal can be accomplished with the interactive canvas and the properties panel alone, but template code may need to be manually edited when extensive dynamic template logic is used, or other complex use cases.

Editing Templates

Drag & Drop

Compose mode offers drag & drop support when adding new elements and rearranging existing elements.

Adding New Elements

To add new elements to a template, open the Add Element menu by clicking the button at the top left of Ionic Studio.

Add Element Menu

The menu contains HTML elements, Ionic components, and the custom components in the app.

To insert an element, click and hold on it, then drag it into place in either canvas or code (in Template mode).

Dragging an element into code allows more precise placement, but dragging it into the canvas may be easier and offers intelligent slot usage when using Ionic components.

Rearranging Existing Elements

To rearrange existing elements in the canvas, click and hold on it, then drag it into place.

Remember, it is also possible to drag and drop code selections in the code editor.

Properties Panel

When the cursor is inside of an element in the code editor, or selected in canvas, the properties panel will update to reflect the selected element.

Properties Panel

In the properties panel, the properties for the selected element are listed. Properties can be changed, as well.

For Ionic components, the properties panel contains a link to the component's documentation at the top, next to its name.

Unfortunately, the properties panel does not show properties for custom components in your app, but this is a feature we'll be adding!

Styles Mode

In Styles mode, changes to the component's styles are reflected in the canvas when saved. The styles in this mode are only applicable to the current page or component.

Editing Styles

Other Compose Modes

The Scripts and Module modes are for making changes to the controller and NgModule, respectively. These modes are mostly here for convenience and do not actively change the canvas or properties panel.

Editing Scripts
Edit this page Updated 2019-07-22