When starting with an Ionic app you can base the new app on a number of provided templates. The templates available:

• Ionic Blank - a starter app template so you can build anything you want.
• Side Menu - an app template that has the Ionic Side Menu component preconfigured.
• Tabs - an app template that has the Tabs component preconfigured.
• Ionic Components Examples - provides usage example for most Ionic components.

You can see all the templates when you click Create new > Ionic from the Apps tab.

🚧

Important Note!

Note that the option of creating new apps with the Ionic framework was removed but we still support the projects that were created with it earlier.

Ionic Starter Template

The simplest template contains a one page with a ion-content and one index page. The pages don't have any specific settings. To create a new app based on an Ionic Blank, select it in Create new app dialog.

Ionic Side Menu Template

If you want to use a Side Menu for navigation purposes, create a new app from the Side Menu template.

The template contains the following:

• Side Menu for navigation between pages.
• Three blank pages: Home, Profile, Info and the Index page.
• A helper directive highlights the active page inside the menu and sets the title of the page dynamically.

How the Template was Created

The following section describes how the template was created.

Index Page Design Tab

1. Side Menu was enabled by the settings Side Menu property on theIndex Page, which was changed to true
2. The Side Menu contains a List of components with 3 list items for navigation. The navigation uses the navigate-to directive; it is present in every list item.
3. List items also have the menu-close directive that closes the side after tapping on the menu item. If you don't want the menu to close, remove the menu-close directive.
4. List items have ng-class directive that highlights the active menu item.
5. The button in the application header with the menu-toggle directive opens and closes the Side Menu.
6. The button also has the icon property set to ion-navicon-round, which displays the hamburger icon.
7. To change the Side Menu side position to the right, set the Side parameter to right. In this case, the menu-close directive needs to be changed to Right.

Models

The template contains a pre-created model called the ActiveScreen with a name field. The field is used for setting the header dynamically and highlighting the active Side Menu Item.

Index Page Scope Tab

The index pages contains a scope variable called activeScreen of ActiveScreen type to store the active page name.

Extending The Template

This section covers how to add extend or modify this app template.

Add New Page

For adding a new page, do the following:

1. Create a new page (route checkbox should be selected)
2. For the created Page add the active-screen directive. The directive value should hold the page display name.
3. Go to the index page, open Side Menu using the project outline, and select List inside it.
4. Add new list item, update its text and add navigate-to directive with the value of created Page route.
5. Add Icon if you need it.
6. Add menu-close directive to list item (or directly to Side Menu).
7. Add the ng-class directive with the {active: activeScreen.name === "Display_Screen_Name"} value. The display page name has to be the same as in step 2.

Updating the Title

How to change page name appearing in header Title:

1. Go to a page and change the active-screen directive to a name that will be displayed in the header.
2. Go to the Index page, select the corresponding list item in Side Menu and change ng-class condition to the new name.
3. To rename a page, use the context menu(gear icon) and select the Rename option. You can also rename the route of the page in Routing section, but then you should update the navigate-to directive of the corresponding item in the side menu. These changes don't affect UI.

Delete Existing Page

How to delete a page:

1. Delete page using the page context menu.
2. Recommendation: delete the existing route to the page in the Routing section.
3. Delete corresponded item in side menu.

Ionic Tabs Template

If you want to use Tabs for navigation purposes, create a new app from the Tabs template.

The project based on the template contains:

• Three blank pages.
• Index page with bottom navigation tabs.
• The activeScreen helper directive, that sets titles in headers dynamically and highlights active page in Tabs.

How the Template was Created

This section describes how the template was created.

Index Page Design Tab

How the index page is designed.

1. Bottom Tabs were enabled by settings the Control Bottom->Tabs property of Index Page to true.
2. Bottom Tabs have three items. The navigate-to directive enables navigation to a specific page.
3. Tabs items have ng-class directive that highlights active item.
4. To change the icon style of the bottom tabs, use the Tabs Style property.

Models

The index page contains a pre-created model called ActiveScreen. Thee name field is used for setting header titles and for detection of active Tabs Item.

Index Page Scope Tab

The index pages contains a scope variable called activeScreen of ActiveScreen type to store the active page name.

Extending Project

This section describes how to customize the app template.

Adding a New Page

How to add a new page:

1. Create a new page (the route checkbox should be selected).
2. For the created page add the active-screen directive. The directive value should hold the page display name.
3. Add a new tabs item and add the navigate-to directive with the value of the created page route.
4. Drop Icon into the new item if you need one.
5. Add the ng-class directive with the {active: activeScreen.name === "Display_Screen_Name"} value. The display page name has to be the same as in step 2.

Rename An Existing Page

How to rename a page:

1. Go to a page and change the active-screen directive to a name that will be displayed in the header.
2. Go to the Index page, select the corresponding tab item, and change ng-class condition to the new name.
3. To rename a page, use the context menu(gear icon) and select the Rename option. You can also rename the route of the page in Routing section, but then you should update the navigate-to directive of the corresponding item in the tabs menu. These changes don't affect UI.

Delete Existing Page

How to delete a page:

1. Delete page using the page context menu.
2. Recommendation: delete the existing route to the page in the Routing section.
3. Delete corresponded item in Tabs.

Ionic Components Example

Also try the Ionic Components Example which shows how to use and configure most Ionic components.