The quickstart tutorial walks you through starting a new app, the basics of Compose and Code, and serving your app.
To create a new Ionic project:
- Open the New Project modal with File » New Project.
- Supply a name for your app. This can be changed later.
- Optionally supply a Bundle ID (aka
Package ID), which is used to identify your app when published. It's okay to leave this blank for now.
- Choose the tabs starter template for your app.
- Click Create Project.
Ionic Studio offers two main modes for making changes to your app:
For this quickstart tutorial, we are going to focus on using Compose to update a page.
- Open Compose mode by clicking the cursor icon in the navigation menu.
- Open the Tab1Page provided by the tabs starter template.
- Select elements by hovering over the canvas and double-clicking into the layers OR holding Ctrl (or Command for macOS) to fine-select.
- Change text by selecting the containing element and double-clicking it. Change the title text from "Tab One" to "My New Page".
- Delete elements by selecting them and pressing the Delete or Backspace key. Delete the
<ion-img>inside the card that shows
- Insert elements by opening the dropdown menus in the header and dragging elements into the canvas or code. Add a button at the bottom of the card.
- Modify component properties by clicking on the component and using the properties panel. Change the Theme Color of your button to Secondary.
- Save your changes with Ctrl+S (or Command+S for macOS), or with File » Save.
Compose uses the component code itself as a source of truth for rendering a preview in the canvas. Try making direct changes to the code to see how the canvas reacts.
Serving your app will start a
While serving your app, changes made when files are saved will automatically reload the Serve Window.
See the documentation for