Structure
Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.
Header and Footer Layout
Header
The most simple layout available consists of a
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
</ion-app>
Footer
As you can see, a toolbar in a header appears above the content. Sometimes an app needs to have a toolbar below the content, which is when a footer is used.
<ion-app>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
Header and Footer
These can also be combined on one page to have a toolbar above and below the content.
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
Live examples
You can view a live example of this setup in Angular here and for React here.
Tabs Layout
A layout consisting of horizontal
ion-router-outlet
or ion-nav
.
<ion-app>
<ion-tabs>
<ion-tab tab="home">
<h1>Home Content</h1>
</ion-tab>
<ion-tab tab="settings">
<h1>Settings Content</h1>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-label>Settings</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
Live examples
You can view a live example of this setup in Angular here and for React here.
Menu Layout
A standard layout among mobile apps includes the ability to toggle a side
<ion-app>
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item button>
<ion-icon slot="start" name='home'></ion-icon>
<ion-label>
Home
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-page class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Main Content</h1>
<p>Click the icon in the top left to toggle the menu.</p>
</ion-content>
</ion-page>
</ion-app>
<ion-menu-controller></ion-menu-controller>
Live examples
You can view a live example of this setup in Angular here and for React here.
Split Pane Layout
A
By default, the split pane view will show when the screen is larger than
768px
, or the
md
breakpoint, but this can be customized to use different breakpoints by setting the
when
property. Below is an example where the split pane contains a menu that is visible for
sm
screens and up, or when the viewport is larger than
576px
. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
<ion-app>
<ion-split-pane when="sm" content-id="main-content">
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item button>
<ion-icon slot="start" name='home'></ion-icon>
<ion-label>
Home
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
</div>
</ion-split-pane>
</ion-app>
It's important to note that the element with the id
matching the
content-id
specified by the split pane will be the main content that is always visible. This can be any element, including an
Live examples
You can view a live example of this setup in Angular here and for React here.