Ionic3 学习笔记

导航：怎么运行的

Ionic 应用中，页面导航基于堆栈机制。要从一个页面跳转到另一个页面，只需将新页面推入或弹出堆栈。主要方法包括：

• push()：导航到新页面
• pop()：返回上一个页面

UI 组件详解

Ionic 提供了丰富的 UI 组件，以下是一些核心组件的介绍与用法。

行动表（Action Sheet）

行动表用于类似菜单查看或删除操作，例如饿了么点菜界面。使用前需导入 ActionSheetController。

import { ActionSheetController } from 'ionic-angular';

警报（Alert）

警报适用于快速操作，如密码验证、小型通知或选项选择。导入 AlertController 后即可使用。

import { AlertController } from 'ionic-angular';

警报类型多样，包括基本警报、提示警报（用于询问密码）、确认提醒（如删除通讯录）、无线电警报和复选框警报。

徽章（Badge）

徽章是向用户传达数值的小组件，常用于显示未读消息数等。

<ion-badge item-end>260k</ion-badge>

按钮（Button）

按钮是基础交互组件，图标按钮可仅包含图标而无文本。

<!-- 仅图标 -->
<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>

通过属性可增强按钮功能，如 small、large、outline、full、block、clear、round 等。

<button ion-button color="secondary">Secondary</button>

卡片（Card）

卡片用于内容展示，提供清晰的视觉层次。

日期时间（DateTime）

DateTime 组件方便用户选择日期和时间，支持自定义显示格式。

<ion-item>
  <ion-label>Start Time</ion-label>
  <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</ion-item>

浮动动作按钮（FAB）

FAB 是材料设计标准组件，圆形按钮代表主要操作，可展开更多相关动作。

<ion-fab right bottom>
    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

支持手势事件如 tap、press、pan、swipe、rotate 和 pinch。

<ion-card (tap)="tapEvent($event)">
  <ion-item>
    Tapped: {{tap}} times
  </ion-item>
</ion-card>

网格（Grid）

网格系统基于 flexbox，包含 12 列，通过 col-* 属性控制列宽。

<ion-grid>
  <ion-row>
    <ion-col col-12>This column will take 12 columns</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>This column will take 6 columns</ion-col>
  </ion-row>
</ion-grid>

图标（Icon）

图标组件易于使用，支持多种状态和平台特定图标。

<ion-icon name="heart"></ion-icon>

平台特定图标通过 ios 和 md 属性指定。

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

可变图标可通过数据绑定动态设置。

<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {
  myIcon: string = "home";
}

输入（Input）

输入字段包含 Control 和 Control Group，用于表单管理和验证。标签类型包括固定内联标签、浮动标签、内联标签、插入标签、占位符标签和堆叠标签。

示例固定内联标签：

<ion-label fixed>Username</ion-label>

列表（List）

列表用于展示信息行，如联系人、播放列表或菜单。

加载中（Loading）

加载组件显示覆盖层，防止用户交互，并指示活动状态。导入 LoadingController 使用。

import { LoadingController } from 'ionic-angular';

菜单（Menu）

菜单是侧面导航组件，可拖出或切换显示。

模态框（Modal）

模态框滑动显示临时 UI，常用于登录、注册或消息组合。导入 ModalController。

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';

导航（Navigation）

导航管理页面间移动，基于堆栈机制。基本导航示例如下：

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})

导航栏自动添加后退按钮，标题随之更新。可从根组件导航或使用标签导航。

弹出框（Popover）

弹出框浮动显示额外信息或操作列表，导入 PopoverController 使用。

import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';

单选按钮（Radio）

单选按钮组允许用户从多个选项中选择一个，通过 checked 设置默认值，disabled 控制禁用状态。

范围（Range）

范围控件通过滑块选择数值。

<ion-item>
  <ion-range [(ngModel)]="brightness">
    <ion-icon range-left small name="sunny"></ion-icon>
    <ion-icon range-right name="sunny"></ion-icon>
  </ion-range>
</ion-item>

搜索栏（Searchbar）

搜索栏绑定模型，输入变化时触发事件。

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

分段（Segment）

分段是一组按钮，用作过滤器切换内容。

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">Kittens</ion-segment-button>
    <ion-segment-button value="puppies">Puppies</ion-segment-button>
  </ion-segment>
</div>

结合 ngSwitch 显示不同内容。

幻灯片（Slides）

幻灯片组件用于轮播展示。

<ion-slides pager>
  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>
  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>
  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>
</ion-slides>

标签（Tabs）

标签提供多标签界面，每个标签独立导航。

<ion-tabs>
  <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
</ion-tabs>

每个标签是单独组件，拥有自己的历史堆栈。

图标和文字

标签内可添加图标和文字，使用 tab-icon 和 tab-title 属性。

<ion-tabs>
  <ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
  <ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
  <ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
</ion-tabs>

徽章

标签可添加徽章，使用 tabBadge 和 tabBadgeStyle 属性。

<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>

吐司（Toast）

吐司短暂显示后自动关闭，导入 ToastController 使用。

import { ToastController } from 'ionic-angular';

export class MyPage {
  constructor(public toastCtrl: ToastController) {}

  presentToast() {
    let toast = this.toastCtrl.create({
      message: 'User was added successfully',
      duration: 3000
    });
    toast.present();
  }
}

切换（Toggle）

切换是布尔值输入组件，用于设置开关。

<ion-item>
  <ion-label>Sam</ion-label>
  <ion-toggle disabled checked="false"></ion-toggle>
</ion-item>

工具栏（Toolbar）

工具栏用作标题、页脚等，基于 flexbox 布局。

基本用法：

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

可添加按钮、分段或搜索栏。按钮通过 ion-buttons 包裹，start 或 end 控制位置。

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only color="royal">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Send To...</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="royal">
        <ion-icon name="person-add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

添加分段：

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment>
      <ion-segment-button value="new">New</ion-segment-button>
      <ion-segment-button value="hot">Hot</ion-segment-button>
    </ion-segment>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

添加搜索栏：

<ion-header>
  <ion-toolbar color="primary">
    <ion-searchbar (input)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

这些组件构成了 Ionic3 应用的基础，熟练掌握能提升开发效率与用户体验。