Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(layout): update structure docs to use new playground examples #2882

Merged
merged 3 commits into from
Apr 10, 2023
Merged

docs(layout): update structure docs to use new playground examples #2882

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1135f1
docs(layout): update structure docs to use new playground examples
brandyscarney Apr 5, 2023
d3ef925
typo
brandyscarney Apr 5, 2023
25efec7
docs(structure): move note up above demo
brandyscarney Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 20 additions & 189 deletions docs/layout/structure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,217 +20,48 @@ Ionic Framework provides several different layouts that can be used to structure

### Header

<aside>
<DocsCard href="../api/header" header="Learn More" icon="/icons/component-header-icon.png">
<code>ion-header</code> API docs
</DocsCard>
</aside>

The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.

```html
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
import Header from '@site/static/usage/v7/header/basic/index.md';

<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
</ion-app>
```
<Header />

### Footer

<aside>
<DocsCard href="../api/footer" header="Learn More" icon="/icons/component-footer-icon.png">
<code>ion-footer</code> API docs
</DocsCard>
</aside>

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.

```html
<ion-app>
<ion-content class="ion-padding">
<h1>Main Content</h1>
</ion-content>
While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
```
import Footer from '@site/static/usage/v7/footer/basic/index.md';

### Header and Footer
<Footer />

These can also be combined on one page to have a toolbar above _and_ below the content.

```html
<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>
## Tabs Layout

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
```
A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).

### Live examples

You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-header-footer) and in React [here](https://stackblitz.com/edit/ionic-react-head-foot).
import Tabs from '@site/static/usage/v7/tabs/router/index.md';

## Tabs Layout
<Tabs />

A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`.

```html
<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](https://stackblitz.com/edit/ionic-ng-tabs) and in React [here](https://stackblitz.com/edit/ionic-react-tab-layout).

## Menu Layout

A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.

```html
<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](https://stackblitz.com/edit/ionic-ng-menu-layout) and in React [here](https://stackblitz.com/edit/ionic-react-menu).
import Menu from '@site/static/usage/v7/menu/basic/index.md';

<Menu />


## Split Pane Layout

A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.

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.

```html
<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 [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md).

### Live examples

You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-split-pane) and in React [here](https://stackblitz.com/edit/ionic-react-split-pane).
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 `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.

It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).

import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';

<SplitPane />