自学教程Ionic Framework 提供了几种不同的布局，可用于构建应用程序。从单页布局到拆分窗格视图和模式。
页眉布局
最简单的可用布局由标题和内容组成。
- Angular
- JavaScript
- React
- Vue
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content><ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content>实例
import React from 'react';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
function Example() {
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Header</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<h1>Content</h1>
</IonContent>
</>
);
}
export default Example;实例
<template>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonHeader, IonTitle, IonToolbar },
});
</script>页脚布局
页眉中的工具栏显示在内容上方时，页脚显示在内容下方。页眉和页脚也可以在同一页面上一起使用。
- Angular
- JavaScript
- React
- Vue
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>实例
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>实例
import React from 'react';
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
function Example() {
return (
<>
<IonContent className="ion-padding">
<h1>Content</h1>
</IonContent>
<IonFooter>
<IonToolbar>
<IonTitle>Footer</IonTitle>
</IonToolbar>
</IonFooter>
</>
);
}
export default Example;实例
<template>
<ion-content class="ion-padding">
<h1>Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script lang="ts">
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonFooter, IonTitle, IonToolbar },
});
</script>选项卡布局
由水平选项卡组成的布局可用于让用户在内容视图之间快速切换。每个选项卡都可以通过使用路由器插座或导航来包含静态内容或导航堆栈。
菜单布局
移动应用程序中的标准布局包括通过单击按钮或从侧面滑动打开来切换侧边菜单的功能。侧菜单通常用于导航，但它们可以包含任何内容。
- Angular
<ion-menu contentId="main-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu Content</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
Tap the button in the toolbar to open the menu.
</ion-content>
</div>拆分窗格布局
拆分窗格布局具有更复杂的结构，因为它可以组合以前的布局。它允许在视区位于指定断点上方时显示多个视图。如果设备的屏幕尺寸低于特定尺寸，则拆分窗格视图将被隐藏。
- Angular
<ion-split-pane when="xs" contentId="main">
<ion-menu contentId="main">
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
Menu Content
</ion-content>
</ion-menu>
<div class="ion-page" id="main">
<ion-header>
<ion-toolbar>
<ion-title>Main View</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
Main View Content
</ion-content>
</div>
</ion-split-pane>
分享笔记