Skip to content

Commit fe449b7

Browse files
brandyscarneybrandyscarney
authored
docs(layout): update structure docs to use new playground examples (#2882)
resolves #594
1 parent dc8e499 commit fe449b7

File tree

1 file changed

+20
-189
lines changed

1 file changed

+20
-189
lines changed

‎docs/layout/structure.md

+20-189
Original file line numberDiff line numberDiff line change
@@ -20,217 +20,48 @@ Ionic Framework provides several different layouts that can be used to structure
2020

2121
### Header
2222

23-
<aside>
24-
<DocsCard href="../api/header" header="Learn More" icon="/icons/component-header-icon.png">
25-
<code>ion-header</code> API docs
26-
</DocsCard>
27-
</aside>
28-
2923
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.
3024

31-
```html
32-
<ion-app>
33-
<ion-header>
34-
<ion-toolbar>
35-
<ion-title>Header</ion-title>
36-
</ion-toolbar>
37-
</ion-header>
25+
import Header from '@site/static/usage/v7/header/basic/index.md';
3826

39-
<ion-content class="ion-padding">
40-
<h1>Main Content</h1>
41-
</ion-content>
42-
</ion-app>
43-
```
27+
<Header />
4428

4529
### Footer
4630

47-
<aside>
48-
<DocsCard href="../api/footer" header="Learn More" icon="/icons/component-footer-icon.png">
49-
<code>ion-footer</code> API docs
50-
</DocsCard>
51-
</aside>
52-
53-
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.
54-
55-
```html
56-
<ion-app>
57-
<ion-content class="ion-padding">
58-
<h1>Main Content</h1>
59-
</ion-content>
31+
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.
6032

61-
<ion-footer>
62-
<ion-toolbar>
63-
<ion-title>Footer</ion-title>
64-
</ion-toolbar>
65-
</ion-footer>
66-
</ion-app>
67-
```
33+
import Footer from '@site/static/usage/v7/footer/basic/index.md';
6834

69-
### Header and Footer
35+
<Footer />
7036

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

73-
```html
74-
<ion-app>
75-
<ion-header>
76-
<ion-toolbar>
77-
<ion-title>Header</ion-title>
78-
</ion-toolbar>
79-
</ion-header>
80-
81-
<ion-content class="ion-padding">
82-
<h1>Main Content</h1>
83-
</ion-content>
38+
## Tabs Layout
8439

85-
<ion-footer>
86-
<ion-toolbar>
87-
<ion-title>Footer</ion-title>
88-
</ion-toolbar>
89-
</ion-footer>
90-
</ion-app>
91-
```
40+
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).
9241

93-
### Live examples
9442

95-
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).
43+
import Tabs from '@site/static/usage/v7/tabs/router/index.md';
9644

97-
## Tabs Layout
45+
<Tabs />
9846

99-
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`.
100-
101-
```html
102-
<ion-app>
103-
<ion-tabs>
104-
<ion-tab tab="home">
105-
<h1>Home Content</h1>
106-
</ion-tab>
107-
<ion-tab tab="settings">
108-
<h1>Settings Content</h1>
109-
</ion-tab>
110-
111-
<ion-tab-bar slot="bottom">
112-
<ion-tab-button tab="home">
113-
<ion-label>Home</ion-label>
114-
<ion-icon name="home"></ion-icon>
115-
</ion-tab-button>
116-
<ion-tab-button tab="settings">
117-
<ion-label>Settings</ion-label>
118-
<ion-icon name="settings"></ion-icon>
119-
</ion-tab-button>
120-
</ion-tab-bar>
121-
</ion-tabs>
122-
</ion-app>
123-
```
124-
125-
### Live examples
126-
127-
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).
12847

12948
## Menu Layout
13049

13150
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.
13251

133-
```html
134-
<ion-app>
135-
<ion-menu content-id="main-content">
136-
<ion-header>
137-
<ion-toolbar color="primary">
138-
<ion-title>Menu</ion-title>
139-
</ion-toolbar>
140-
</ion-header>
141-
142-
<ion-content>
143-
<ion-list>
144-
<ion-list-header> Navigate </ion-list-header>
145-
<ion-menu-toggle auto-hide="false">
146-
<ion-item button>
147-
<ion-icon slot="start" name="home"></ion-icon>
148-
<ion-label> Home </ion-label>
149-
</ion-item>
150-
</ion-menu-toggle>
151-
</ion-list>
152-
</ion-content>
153-
</ion-menu>
154-
155-
<ion-page class="ion-page" id="main-content">
156-
<ion-header>
157-
<ion-toolbar>
158-
<ion-buttons slot="start">
159-
<ion-menu-toggle>
160-
<ion-button>
161-
<ion-icon slot="icon-only" name="menu"></ion-icon>
162-
</ion-button>
163-
</ion-menu-toggle>
164-
</ion-buttons>
165-
<ion-title>Header</ion-title>
166-
</ion-toolbar>
167-
</ion-header>
168-
<ion-content class="ion-padding">
169-
<h1>Main Content</h1>
170-
<p>Click the icon in the top left to toggle the menu.</p>
171-
</ion-content>
172-
</ion-page>
173-
</ion-app>
174-
175-
<ion-menu-controller></ion-menu-controller>
176-
```
177-
178-
### Live examples
179-
180-
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).
52+
import Menu from '@site/static/usage/v7/menu/basic/index.md';
53+
54+
<Menu />
55+
18156

18257
## Split Pane Layout
18358

18459
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.
18560

186-
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.
187-
188-
```html
189-
<ion-app>
190-
<ion-split-pane when="sm" content-id="main-content">
191-
<ion-menu content-id="main-content">
192-
<ion-header>
193-
<ion-toolbar color="primary">
194-
<ion-title>Menu</ion-title>
195-
</ion-toolbar>
196-
</ion-header>
197-
198-
<ion-content>
199-
<ion-list>
200-
<ion-list-header> Navigate </ion-list-header>
201-
<ion-menu-toggle auto-hide="false">
202-
<ion-item button>
203-
<ion-icon slot="start" name="home"></ion-icon>
204-
<ion-label> Home </ion-label>
205-
</ion-item>
206-
</ion-menu-toggle>
207-
</ion-list>
208-
</ion-content>
209-
</ion-menu>
210-
211-
<div class="ion-page" id="main-content">
212-
<ion-header>
213-
<ion-toolbar>
214-
<ion-buttons slot="start">
215-
<ion-menu-toggle>
216-
<ion-button>
217-
<ion-icon slot="icon-only" name="menu"></ion-icon>
218-
</ion-button>
219-
</ion-menu-toggle>
220-
</ion-buttons>
221-
<ion-title>Header</ion-title>
222-
</ion-toolbar>
223-
</ion-header>
224-
<ion-content class="ion-padding">
225-
<h1>Main Content</h1>
226-
</ion-content>
227-
</div>
228-
</ion-split-pane>
229-
</ion-app>
230-
```
231-
232-
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).
233-
234-
### Live examples
235-
236-
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).
61+
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.
62+
63+
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).
64+
65+
import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
66+
67+
<SplitPane />

0 commit comments

Comments
 (0)