ionic的组件components

详情参考https://ionicframework.com/docs/components/

Action Sheets 动作表

操作表单从设备屏幕底部向上滑动，并显示一组选项，可以确认或取消操作。行动表有时可以用来作为菜单的替代，但是，他们不应该用于导航。

操作表总是显示在页面上的任何其他组件之上，并且必须被解雇才能与底层内容交互。当它被触发时，页面的其余部分会变暗，以便更多地关注“操作表”选项。

import { ActionSheetController } from 'ionic-angular';

export class MyPage {
  constructor(public actionSheetCtrl: ActionSheetController) {
  }

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Modify your album',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}

Alerts 警报

警报是向用户提供选择特定动作或动作列表的好方法。他们也可以为用户提供重要的信息，或要求他们作出决定（或多个决定）。

从用户界面的角度来看，警报可以被认为是一种“浮动”模式，只覆盖屏幕的一部分。这意味着警报只能用于快速操作，如密码验证，小应用程序通知或快速选项。更深入的用户流量应保留全屏情态动词。

警报非常灵活，可以很容易地进行定制。

Basic Alerts 基本警报

基本警报通常用于通知用户有关新信息（应用程序中的更改，新功能等），需要确认的紧急情况，或向用户确认操作是否成功。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}

Prompt Alerts 提示警报

提示提供了一种输入数据或信息的方法。在向前移动应用程序的流程之前，通常会使用提示来询问用户密码。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showPrompt() {
    let prompt = this.alertCtrl.create({
      title: 'Login',
      message: "Enter a name for this new album you're so keen on adding",
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    prompt.present();
  }
}

Confirmation Alerts 确认警报

当需要用户明确确认一个特定的选择，然后在应用程序中前进时，使用确认警报。确认提醒的一个常见例子是检查以确保用户想要从他们的地址簿中删除或删除联系人。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showConfirm() {
    let confirm = this.alertCtrl.create({
      title: 'Use this lightsaber?',
      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    confirm.present();
  }
}

Radio Alerts 无线电警报

无线电警报是一种确认警报，但使用无线电组件来提供多种选择。向用户提供一组选项，但只能选择一个选项。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showRadio() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Lightsaber color');

    alert.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });
    alert.present();
  }
}

Checkbox Alerts 复选框警报

复选框警报是一种确认警报，但使用复选框组件可提供多种选择。他们为用户提供了一系列可供选择的选项。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',
      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

Badges 徽章

徽章是通常将数值传递给用户的小部件。它们通常在一个项目中使用。

<ion-item>
  <ion-icon name="logo-twitter" item-start></ion-icon>
  Followers
  <ion-badge item-end>260k</ion-badge>
</ion-item>

徽章也可以被赋予任何颜色属性：

<ion-badge color="secondary"></ion-badge>

Buttons 按钮

Default Style 默认样式

<button ion-button>Buttonbutton>
该color属性设置按钮的颜色。离子包括许多默认的颜色，可以很容易地被覆盖：

<button ion-button color="light">Lightbutton>
<button ion-button>Defaultbutton>
<button ion-button color="secondary">Secondarybutton>
<button ion-button color="danger">Dangerbutton>
<button ion-button color="dark">Darkbutton>

Outline Style 大纲样式

要使用按钮的大纲样式，只需添加outline属性：

<button ion-button color="light" outline>Light Outlinebutton>
<button ion-button outline>Primary Outlinebutton>
<button ion-button color="secondary" outline>Secondary Outlinebutton>
<button ion-button color="danger" outline>Danger Outlinebutton>
<button ion-button color="dark" outline>Dark Outlinebutton>

Clear Style 清除样式

要创建一个圆角的按钮，只需添加round属性：

"light" round>Light Round
round>Primary Round
"secondary" round>Secondary Round
"danger" round>Danger Round
"dark" round>Dark Round

Round Buttons 圆角按钮

要创建一个圆角的按钮，只需添加round属性：

"light" round>Light Round
round>Primary Round
"secondary" round>Secondary Round
"danger" round>Danger Round
"dark" round>Dark Round

Block Buttons 块按钮

添加block到按钮将使按钮占据其父宽度的100％。它也将添加display: block到按钮：

block>Block Button

Full Buttons 完整按钮

添加full到按钮也会使按钮占据其父宽度的100％。但是，它也会删除按钮的左右边界。当按钮应该在显示器的整个宽度上延伸时，此样式非常有用。

<button ion-button full>Full Button</button>

Button Sizes 按钮大小

添加large属性使按钮更大，或small使其更小：

<button ion-button small>Smallbutton>
<button ion-button>Defaultbutton>
<button ion-button large>Largebutton>

Icon Buttons 图标按钮

要将图标添加到按钮，请在其中添加一个图标组件以及一个位置属性：


<button ion-button icon-left>
  <ion-icon name="home">ion-icon>
  Left Icon
button>


<button ion-button icon-right>
  Right Icon
  <ion-icon name="home">ion-icon>
button>


<button ion-button icon-only>
  <ion-icon name="home">ion-icon>
button>

Buttons In Components 组件中的按钮

尽管按钮可以单独使用，但是可以很容易地在其他组件中使用。例如，按钮可以添加到列表项目或导航栏。

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-list>
  <ion-item>
    Left Icon Button
    <button ion-button outline item-end icon-left>
      <ion-icon name="star"></ion-icon>
      Left Icon
    </button>
  </ion-item>
</ion-list>

Cards 卡牌

卡片是展示重要内容的绝佳方式，并迅速成为应用程序的核心设计模式。它们是遏制和组织信息的好方法，同时也为用户设定可预测的期望。有了这么多的内容可以立即显示，而且屏幕通常很少，卡片已经很快成为许多公司的设计模式，包括Google，Twitter和Spotify。

对于移动体验而言，卡片可以轻松地在多种不同的屏幕尺寸下直观地显示相同的信息。他们允许更多的控制，灵活，甚至可以动画。卡通常被放置在另一个之上，但是它们也可以像“页面”一样使用，并在左右之间滑动。

Basic Cards 基本卡片

卡主要是一个CSS组件。要使用基本卡，请遵循以下结构：

<ion-card>

  <ion-card-header>
    Card Header
  ion-card-header>

  <ion-card-content>
    
  ion-card-content>

ion-card>

Card Headers 卡头

就像一个普通的页面一样，卡片可以被定制为包含标题。要为卡片添加标题，请在卡片<ion-card-header>内添加组件：

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

Card Lists 卡列表

一张卡片可以包含一个项目列表。ion-list在里面添加一个组件ion-card-content来显示一个列表：

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-start></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-start></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-start></ion-icon>
      Cafe
    </button>

    <button ion-item>
      <ion-icon name="paw" item-start></ion-icon>
      Dog Park
    </button>

    <button ion-item>
      <ion-icon name="beer" item-start></ion-icon>
      Pub
    </button>

    <button ion-item>
      <ion-icon name="planet" item-start></ion-icon>
      Space
    </button>

  </ion-list>
</ion-card>

Card Images 卡片图像

图片大小各不相同，因此在整个应用中采用一致的样式非常重要。图像可以很容易地添加到卡。将图像添加到卡上将使图像具有恒定的宽度和可变的高度。列表，标题和其他卡组件可以很容易地与图像卡相结合。要将图像添加到卡片，请使用以下标记：

<ion-card>
  <img src="img/nin-live.png"/>
  <ion-card-content>
    <ion-card-title>
      Nine Inch Nails Live
      </ion-card-title>
    <p>
      The most popular industrial group ever, and largely
      responsible for bringing the music to a mass audience.
    </p>
  </ion-card-content>
</ion-card>

Background Images 背景图片

卡可以用来实现多种设计。我们提供了许多元素来实现常见的设计，但有时需要添加自定义样式。添加背景图像卡是一个完美的例子，如何添加自定义样式可以实现一个完全不同的外观。

下面的html可以被添加到页面的内容中：

<ion-content class="card-background-page">

  <ion-card>
    <img src="img/card-saopaolo.png"/>
    <div class="card-title">São Paulodiv>
    <div class="card-subtitle">41 Listingsdiv>
  ion-card>

  <ion-card>
    <img src="img/card-amsterdam.png"/>
    <div class="card-title">Amsterdamdiv>
    <div class="card-subtitle">64 Listingsdiv>
  ion-card>

  <ion-card>
    <img src="img/card-sf.png"/>
    <div class="card-title">San Franciscodiv>
    <div class="card-subtitle">72 Listingsdiv>
  ion-card>

  <ion-card>
    <img src="img/card-madison.png"/>
    <div class="card-title">Madisondiv>
    <div class="card-subtitle">28 Listingsdiv>
  ion-card>

ion-content>
然后，在页面的Sass文件中：

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}

Advanced Cards 高级卡

来自不同类型的卡片的样式可以被组合以创建高级卡片。卡也可以使用自定义的CSS。下面是几个先进的卡片，通过将各种卡片属性与少量的自定义CSS组合在一起而构建。

1.社交卡
2.地图卡

社交卡
演示源
在应用程序中创建社交卡经常是必要的。使用卡中不同项目的组合可以实现这一点。

<ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    ion-avatar>
    <h2>Marty McFlyh2>
    <p>November 5, 1955p>
  ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.p>
  ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up">ion-icon>
        <div>12 Likesdiv>
      button>
    ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text">ion-icon>
        <div>4 Commentsdiv>
      button>
    ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      ion-note>
    ion-col>
  ion-row>

ion-card>

地图卡
演示源
离子组件的组合可用于创建显示为地图的卡片。

<ion-card>

  <img src="img/advance-card-map-madison.png">
  <ion-fab right top>
    <button ion-fab>
      <ion-icon name="pin">ion-icon>
    button>
  ion-fab>

  <ion-item>
    <ion-icon name="football" item-start large>ion-icon>
    <h2>Museum of Footballh2>
    <p>11 N. Way St, Madison, WI 53703p>
  ion-item>

  <ion-item>
    <ion-icon name="wine" item-left large >ion-icon>
    <h2>Institute of Fine Cocktailsh2>
    <p>14 S. Hop Avenue, Madison, WI 53703p>
  ion-item>

  <ion-item>
    <span item-left>18 minspan>
    <span item-left>(2.6 mi)span>
    <button ion-button icon-left clear item-end>
      <ion-icon name="navigate">ion-icon>
      Start
    button>
  ion-item>

ion-card>

Checkbox 复选框

复选框是一个保存布尔值的输入组件。复选框与HTML复选框输入没有区别。但是，像其他Ionic组件一样，复选框在每个平台上的样式都是不同的。使用checked属性设置默认值，使用disabled属性禁用用户更改值。

<ion-item>
  <ion-label>Daenerys Targaryenion-label>
  <ion-checkbox color="dark" checked="true">ion-checkbox>
ion-item>

<ion-item>
  <ion-label>Arya Starkion-label>
  <ion-checkbox disabled="true">ion-checkbox>
ion-item>

DateTime 时间日期

DateTime组件用于显示一个界面，使用户可以轻松选择日期和时间。DateTime组件与native 元素类似，但是，Ionic的DateTime组件可以轻松地以首选格式显示日期和时间，并管理日期时间值。

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

FABs 浮动按钮

FAB（浮动按钮）是标准的材料设计组件。他们被塑造成一个代表推动行动的圈子。按下时，可能会包含更多相关的操作。顾名思义，FAB就是以固定的位置浮在内容上的。

<ion-content>
  
  <ion-fab top right edge>
    <button ion-fab mini><ion-icon name="add">ion-icon>button>
    <ion-fab-list>
      <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>

  <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>

ion-content>

Genstures 手势

基本手势可以从HTML通过结合访问tap，press，pan，swipe，rotate，和pinch事件。

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

Grid 格

Ionic的网格系统基于flexbox，这是Ionic支持的所有设备都支持的CSS功能。网格由三个单元组成 – 网格，行和列。
网格系统由12列组成，ion-col可以通过设置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>
一个ion-col可以通过设置不同的断点大小col-<breakpoint>-<width>。

<ion-grid>
  <ion-row>
    <ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-3>
      This column will be 12 columns wide by default,
      9 columns at the small breakpoint,
      6 at the medium breakpoint, 4 at large, and 3 at xl.
    </ion-col>
  </ion-row>
</ion-grid>

Icons 图标

众所周知和喜爱，Ionic带有700+图标。

要使用图标，请填写组件name上的属性ion-icon：

<ion-icon name="heart">ion-icon>
活动/非活动图标
所有图标都有active和inactive状态。活动图标通常是满的和厚的，其中非活动图标被勾画和变薄。将该isActive属性设置为true或false更改图标的状态。如果没有指定值，图标将默认为激活状态。

<ion-icon name="heart">ion-icon>                    
<ion-icon name="heart" isActive="false">ion-icon>  
平台特定的图标
许多图标都有Material Design和iOS版本。Ionic将自动使用基于该平台的正确版本。

要指定要用于每个平台的图标，请使用md和ios属性并提供平台特定的图标名称。

<ion-icon ios="logo-apple" md="logo-android">ion-icon>
变量图标
使用变量设置图标：

<ion-icon [name]="myIcon">ion-icon>
export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}

探索更完整的图标 https://ionicframework.com/docs/ionicons/

Inputs 输入

输入对于以安全的方式收集和处理用户输入是必不可少的。他们应该遵循每个平台的样式和交互准则，以便他们直观地与用户交互。Ionic使用Angular 2的表单库，它可以被认为是两个相关的组件，控件和控件组。

表单中的每个输入字段都有一个Control，一个绑定到字段值的函数，并执行验证。一个控制组是控件的集合。控件组处理表单提交，并提供可用于确定整个表单是否有效的高级API。

Fixed Inline Labels 固定内嵌标签

用于fixed在输入元素的左侧放置一个标签。输入文字时，标签不会隐藏。不管标签的长度如何，输入都将在相同的位置对齐。占位符文本可以与固定标签结合使用。

<ion-list>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

Floating Labels 浮动标签

浮动标签是在选择输入时动画或“浮动”的标签。将该floating属性添加到ion-label要使用的。

在右侧的示例中输入文本以查看正在使用的浮动标签。

<ion-list>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

Inline Labels 行内标签

一个ion-label没有任何属性是一个内联标签。输入文字时，标签不会隐藏。占位符文本可以与内联标签结合使用。

<ion-list>

  <ion-item>
    <ion-label>Usernameion-label>
    <ion-input type="text">ion-input>
  ion-item>

  <ion-item>
    <ion-label>Passwordion-label>
    <ion-input type="password">ion-input>
  ion-item>

ion-list>

<div padding>
  <button block>Sign Inbutton>
div>

Inset Labels 插入标签

默认情况下，每个输入项将填充其父元素的宽度的100％。通过将inset属性添加到ion-list组件来使输入插入。

<ion-list inset>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

Placeholder Labels 占位符标签

将该placeholder属性添加到<input>元素以模拟输入的标签。当输入文本时，占位符标签被隐藏。

<ion-list>

  <ion-item>
    <ion-input type="text" placeholder="Username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="password" placeholder="Password"></ion-input>
  </ion-item>

</ion-list>

Stacked Labels 堆积的标签

堆叠标签将始终显示在输入顶部。将该stacked属性添加到ion-label要使用的。占位符文本可以与堆叠标签结合使用。

<ion-list>

  <ion-item>
    <ion-label stacked>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

Lists 清单列表

列表用于显示信息行，例如联系人列表，播放列表或菜单。或者，也许有些疯狂，我们甚至不知道存在！

Basic Lists 基本列表

默认情况下，所有列表将使用分隔线进行样式化： <ion-list> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} button> ion-list> 没有线 演示源 添加no-lines属性将隐藏列表项之间的分隔符： <ion-list no-lines> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} button> ion-list>

Inset List 插入列表

列表默认情况下没有外部保证金。要添加一个，请将该inset属性添加到ion-list组件。 <ion-list inset> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} button> ion-list>

List Dividers 列表分割线

分组的项目，<ion-item-group>而不是<ion-list>。使用<ion-item-divider>组件将组分成多个部分：

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
</ion-content>

List Headers 列表头

每个列表可以在列表顶部包含一个标题：

<ion-list>
  <ion-list-header>
    Action
  </ion-list-header>
  <ion-item>Terminator II</ion-item>
  <ion-item>The Empire Strikes Back</ion-item>
  <ion-item>Blade Runner</ion-item>
</ion-list>

Icon List 图标列表

将图标添加到列表项是提示每个项目内容的好方法。图标的位置可以使用item-left和item-right属性来设置。图标的大小默认为small，并且可以使用该large属性使其更大。

<ion-list>
  <ion-item>
    <ion-icon name="leaf" item-start></ion-icon>
      Herbology
    <ion-icon name="rose" item-end></ion-icon>
  </ion-item>
</ion-list>

Avatar List 头像列表

项目头像显示大于图标的图像，但小于缩略图。要使用化身，请<ion-avatar>在项目内添加组件。头像的位置可以使用item-left和item-right属性来设置：

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-cher.png">
    ion-avatar>
    <h2>Cherh2>
    <p>Ugh. As if.p>
  ion-item>
ion-list>

Multi-line List 多行列表

多行列表与常规列表相同，但项目有多行文本。当<ion-item>组件包含多个标题或段落元素时，它将自动扩展其高度以适应新的文本行。下面是三行文字的例子：

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-finn.png">
    ion-avatar>
    <h2>Finnh2>
    <h3>Don't Know What To Do!h3>
    <p>I've had a pretty messed up day. If we just...p>
  ion-item>
ion-list>

Sliding List 滑动列表

滑动项目可以向左或向右滑动以显示一组隐藏的按钮。要使用滑动项目，请在ion-item-sliding组件内添加一个ion-list组件。接下来，<ion-item-options>在滑动项目内添加一个组件以包含按钮。

有关更多信息，请查看API文档。

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-avatar item-start>
        <img src="img/slimer.png">
      </ion-avatar>
      <h2>Slimer</h2>
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="primary">
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button ion-button color="secondary">
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
    <ion-item-options side="right">
      <button ion-button color="primary">
        <ion-icon name="mail"></ion-icon>
        Email
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Thumbnail List 缩略图列表

项目缩略图显示占据了项目整个高度的图像。要使用缩略图，请<ion-thumbnail>在项目内添加组件。缩略图的位置可以使用item-left和item-right属性进行设置：

<ion-list>
  <ion-item>
    <ion-thumbnail item-start>
      <img src="img/thumbnail-totoro.png">
    ion-thumbnail>
    <h2>My Neighbor Totoroh2>
    <p>Hayao Miyazaki • 1988p>
    <button ion-button clear item-end>Viewbutton>
  ion-item>
ion-list>

Loading 加载中

加载组件是一个覆盖层，可以防止用户在指示活动时进行交互。默认情况下，它会根据模式显示一个微调框。动态内容可以通过微调器显示。微调器可以隐藏或定制使用几个预定义的选项。即使在导航过程中，加载指示符也显示在其他内容的顶部。

import { LoadingController } from 'ionic-angular';

export class MyPage {
  constructor(public loadingCtrl: LoadingController) {
  }

  presentLoading() {
    let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();
  }
}

Menus 菜单

菜单是可以拖出或切换显示的侧面菜单导航。当菜单关闭时，菜单的内容将被隐藏。

菜单基于平台适应适当的风格。

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menuion-title>
    ion-toolbar>
  ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(homePage)">
        Home
      button>
      <button ion-item (click)="openPage(friendsPage)">
        Friends
      button>
      <button ion-item (click)="openPage(eventsPage)">
        Events
      button>
      <button ion-item (click)="closeMenu()">
        Close Menu
      button>
    ion-list>
  ion-content>
ion-menu>

<ion-nav id="nav" #content [root]="rootPage">ion-nav>

Modals 模态

模式在屏幕外滑动以显示临时UI，通常用于登录或注册页面，消息组成和选项选择。

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

export class MyPage {
  constructor(public modalCtrl: ModalController) {
  }

  presentModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }
}

Navigation 导航

导航是用户在应用程序的不同页面之间移动的方式。Ionic的导航遵循标准的原生导航概念，就像iOS中的导航概念一样。为了实现类似本机的导航，我们已经构建了一些新的导航组件，这对于习惯于传统桌面浏览器导航的开发者来说可能感觉不同。

有几种方法可以在整个Ionic应用程序中导航：

基本导航
演示源
导航是通过<ion-nav>组件来处理的，这个组件作为一个简单的堆栈来工作，新的页面被压入和弹出，对应着历史上的前进和后退。

我们从加载导航组件的根页面开始：

import {StartPage} from 'start'

@Component({
  template: '<ion-nav [root]="rootPage">ion-nav>'
})
class MyApp {
  // First page to push onto the stack
  rootPage = StartPage;
}
接下来，我们可以通过将导航控制器注入到任何页面中来访问导航到的每个页面中的导航控制器。请注意，页面组件不需要选择器。离子自动添加这些。

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Loginion-title>
    ion-navbar>
  ion-header>

  <ion-content>Hello Worldion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
}
要从一个页面导航到另一个页面，只需将新页面推入或弹出到堆栈中即可：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Loginion-title>
    ion-navbar>
  ion-header>

  <ion-content>
    <button (click)="goToOtherPage()">
      Go to OtherPage
    button>
  ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {}

  goToOtherPage() {
    //push another page onto the history stack
    //causing the nav controller to animate the new page in
    this.navCtrl.push(OtherPage);
  }
}

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Pageion-title>
    ion-navbar>
  ion-header>

  <ion-content>I'm the other page!ion-content>`
})
class OtherPage {}
如果你的页面有一个<ion-navbar>，如果它不是一个根页面，一个后退按钮将被自动地添加到它，并且导航栏的标题将被更新。

另外，如果你想回去，但没有NavBar，你可以从堆栈中弹出当前页面：

@Component({
  template: `
  <ion-content>
    <button (click)="goBack()">
      There's no place like home
    button>
  ion-content>`
})
class OtherPage {
  constructor(public navCtrl: NavController) {}

  goBack() {
    this.navCtrl.pop();
  }
}
有关基本导航的更多信息，请查看Nav API参考。

从根组件导航
如果你想控制你的根应用程序组件导航？您无法注入，NavController因为导航控制器的任何组件都是根组件的子项，所以它们不能被注入。

通过添加一个引用变量ion-nav，你可以@ViewChild用来获取Nav组件的一个实例，这是一个导航控制器（它的扩展NavController）：

@Component({
  template: '<ion-nav #myNav [root]="rootPage">ion-nav>'
})
export class MyApp {
  @ViewChild('myNav') nav
  rootPage = TabsPage;

  // Wait for the components in MyApp's template to be initialized
  // In this case, we are waiting for the Nav identified by
  // the template reference variable #myNav
  ngAfterViewInit() {
    // Let's navigate from TabsPage to Page1
    this.nav.push(LoginPage);
  }
}
选项卡式导航
导航可以嵌套在复杂组件（如Tabs）中使用。与传统的路由系统不同，Ionic的导航功能可以轻松地从应用中的任何位置导航到给定的页面，而无需指定特定的路由。以iOS上的App Store应用程序为例，我们可以轻松导航到AppDetailPage，该AppDetailPage显示有关特定应用程序的信息（可以自己试试看！）。看看Tabs文档，了解如何轻松实现这一点的更多信息。

Popover

类似于app右上角的转发分享。
Popover是一个浮动在应用程序内容上方的视图。Popovers提供了一种简单的方式来呈现或收集用户的信息，通常在以下情况下使用：

• 显示有关当前视图的更多信息
• 选择一个常用的工具或配置
• 在您的某个视图中提供要执行的操作列表

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

export class MyPage {
  constructor(public popoverCtrl: PopoverController) {
  }

  presentPopover() {
    let popover = this.popoverCtrl.create(MyPopOverPage);
    popover.present();
  }
}

Radio 收音机

像复选框一样，收音机是一个保存布尔值的输入组件。在引擎盖下，收音机与HTML无线电输入没有区别。但是，像其他Ionic组件一样，每个平台上的收音机的样式都是不同的。与复选框不同，无线电组件组成一个组，一次只能选择一个无线电。使用该checked属性设置默认值，并使用该disabled属性禁用用户更改为该值。

<ion-list radio-group>
  <ion-list-header>
    Language
  </ion-list-header>

  <ion-item>
    <ion-label>Go</ion-label>
    <ion-radio checked="true" value="go"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Rust</ion-label>
    <ion-radio value="rust"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Python</ion-label>
    <ion-radio value="python" disabled="true"></ion-radio>
  </ion-item>
</ion-list>

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 搜索栏

搜索栏绑定到模型，并在模型更改时发出输入事件。

"getItems($event)">

  "let item of items">
    {{ item }}
  

请注意，在此示例中，getItems()当输入发生更改时会调用该函数，从而更新显示的城市。虽然此示例基于搜索输入过滤列表，但Searchbar可以用于许多不同的场景：

@Component({
  templateUrl: 'search/template.html',
})
class SearchPage {

  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

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>

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-puppy-1.jpg">
      ion-thumbnail>
      <h2>Rubyh2>
    ion-item>
    ...
  ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-kitten-1.jpg">
      ion-thumbnail>
      <h2>Lunah2>
    ion-item>
    ...
  ion-list>
div>

Select 选择

该ion-select组件类似于HTML 元素，但是，Ionic的select组件使用户更容易排序并选择首选选项。当用户点击选择组件时，会出现一个对话框，其中的所有选项都显示在一个大的，易于选择的列表中。

list>
  
    Gaming
    "gaming">
      option value="nes">NESoption>
      option value="n64">Nintendo64option>
      option value="ps">PlayStationoption>
      option value="genesis">Sega Genesisoption>
      option value="saturn">Sega Saturnoption>
      option value="snes">SNESoption>
    
  
list>

可以通过添加multiple="true"到组件来进行多项选择。

list>
  
    Toppings
    "toppings" multiple="true" cancelText="Nah" okText="Okay!">
      option value="bacon" selected="true">Baconoption>
      option value="olives">Black Olivesoption>
      option value="xcheese" selected="true">Extra Cheeseoption>
      option value="peppers">Green Peppersoption>
      option value="mushrooms">Mushroomsoption>
      option value="onions">Onionsoption>
      option value="pepperoni">Pepperonioption>
      option value="pineapple">Pineappleoption>
      option value="sausage">Sausageoption>
      option value="Spinach">Spinachoption>
    
  
list>

Slides 幻灯片

幻灯片可以轻松创建画廊，教程和基于页面的布局。幻灯片在组件上采取了许多配置选项。

<ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1h2>
  ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2h2>
  ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3h2>
  ion-slide>

ion-slides>

Tabs 标签

选项卡使用选项卡栏和一组可以选项卡的视图来支持多选项卡界面。

Text Tabs 文本标签

要初始化选项卡，请使用每个选项卡的子选项：

import { Component } from '@angular/core';
import { ionicBootstrap } from 'ionic-angular';
import { Tab1 } from './tab1-page';
import { Tab2 } from './tab2-page';
@Component({
  template: `  <ion-tab tabIcon="heart" [root]="tab1">ion-tab> <ion-tab tabIcon="star" [root]="tab2">ion-tab> ion-tabs>`
})
class MyApp {

  tab1: any;
  tab2: any;

  constructor() {
    this.tab1 = Tab1;
    this.tab2 = Tab2;
  }
}
个别标签只是 @Components

import { Component } from '@angular/core';

@Component({
  template: `  <ion-navbar> <ion-title>Heartion-title> ion-navbar> ion-header> <ion-content>Tab 1ion-content>`
})
export class Tab1 {}

@Component({
  template: `  <ion-navbar> <ion-title>Starion-title> ion-navbar> ion-header> <ion-content>Tab 2ion-content>`
})
export class Tab2 {}
请注意，每个绑定到一个[root]属性，就像在上面的导航部分。那是因为每个实际上只是一个导航控制器。这意味着每个选项卡都有自己的历史堆栈，并且每个选项卡的NavController instances injected子@Components选项对每个选项卡都是唯一的：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
...
})
class Tab1 {
  constructor(public navCtrl: NavController) {
    // Id is 1, nav refers to Tab1
    console.log(this.nav.id)
  }
}

@Component({
...
})
class Tab2 {
  constructor(public navCtrl: NavController) {
    // Id is 2, nav refers to Tab2
    console.log(this.nav.id)
  }
}

Icon Tabs 图标选项卡

要在选项卡内添加图标，请使用该tab-icon属性。这个属性可以传递任何图标的名字：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabsion-title>
    ion-navbar>
  ion-header>
  <ion-content>ion-content>
  `
})
class TabContentPage {
  constructor() {}
}

@Component({
  template: `
  <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>`
})
export class TabsIconPage {
  constructor() {
    this.tab1 = TabContentPage;
    this.tab2 = TabContentPage;
    ...
  }
}

Text and Icon Tabs 文本和图标选项卡

要在选项卡内添加文本和图标，请使用tab-icon和tab-title属性：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabsion-title>
    ion-navbar>
  ion-header>
  <ion-content>ion-content>
  `
})
class TabsTextContentPage {
  constructor() {}
}

@Component({
  template: `
  <ion-tabs>
    <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1">ion-tab>
    <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab2">ion-tab>
    <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab3">ion-tab>
    <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab4">ion-tab>
  ion-tabs>`
})
export class TabsTextPage {
  constructor() {
    this.tab1 = TabsTextContentPage;
    this.tab2 = TabsTextContentPage;
    ...
  }
}

Badge Tabs 徽章标签

要将徽章添加到选项卡，请使用tabBadge和tabBadgeStyle属性。该tabBadgeStyle属性可以传递任何颜色的名称：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabsion-title>
    ion-navbar>
  ion-header>
  <ion-content>ion-content>
  `
})
class TabBadgePage {
  constructor() {}
}

@Component({
  template: `
    <ion-tabs>
      <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger">ion-tab>
      <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger">ion-tab>
      <ion-tab tabIcon="musical-notes" [root]="tabThree">ion-tab>
    ion-tabs>
    `
})
export class BadgesPage {
  constructor() {
    this.tabOne = TabBadgePage;
    this.tabTwo = TabBadgePage;
  }
}

Toast 吐司

吐司是一个微妙的通知，出现在应用程序的内容之上。通常情况下，吐司显示一段时间，然后自动解雇。

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 切换

toggle是一个保存布尔值的输入组件。与复选框类似，切换通常用于允许用户打开或关闭设置。属性，如value，disabled以及checked可应用于切换来控制其行为。

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

Toolbar 工具条

工具栏是一个通用栏，可以在应用程序中用作页眉，子页眉，页脚甚至子页脚。由于ion-toolbar基于flexbox，无论您的页面中有多少个工具栏，它们都会正确显示，并ion-content会相应地进行调整。

注意：通常在与导航结合使用的时候使用NavBarion-header。

Basic Usage 基本用法

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbarion-title>
  ion-toolbar>
ion-header>

<ion-content>ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footerion-title>
  ion-toolbar>
ion-footer>
头
工具栏的最佳用途之一是作为标题。

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="more">ion-icon>
      button>
    ion-buttons>

    <ion-title>Headerion-title>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search">ion-icon>
      button>
    ion-buttons>

  ion-toolbar>
ion-header>

<ion-content>
  <p>There is a header above me!p>
ion-content>

Changing the Color 改变颜色

您可以通过更改元素的属性来更改工具栏的颜色。


@Component({
  template: `
    <ion-toolbar color="primary">
      <ion-title>Toolbarion-title>
    ion-toolbar>


    <ion-toolbar color="secondary">
      <ion-title>Toolbarion-title>
    ion-toolbar>

    <ion-toolbar color="danger">
      <ion-title>Toolbarion-title>
    ion-toolbar>


    <ion-toolbar color="dark">
      <ion-title>Toolbarion-title>
    ion-toolbar>
  `
  })

您也可以用相同的方法更改导航栏的颜色。这将允许你在你的应用程序中每个页面有一个不同的颜色导航条。

<ion-header>
  <ion-navbar color="dark">
    <ion-title>Darkion-title>
  ion-navbar>
ion-header>


<ion-header>
  <ion-navbar color="danger">
    <ion-title>Dangerion-title>
  ion-navbar>
ion-header>

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>Secondaryion-title>
  ion-navbar>
ion-header>

Buttons in Toolbars 工具栏中的按钮

按钮可以添加到页眉和页脚工具栏。要将按钮添加到工具栏，我们需要先添加一个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-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Ash, Misty, Brock</p>
    <ion-buttons end>
      <button ion-button icon-right color="royal">
        Send
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Segment in Toolbars 段中的工具栏

段是允许用户在不同的数据集之间切换的好方法。使用以下标记将一个段添加到工具栏中：

<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>

Searchbar in Toolbars 搜索栏在工具栏中

另一个常见的设计范例是在您的工具栏中包含一个搜索栏。 <ion-header> <ion-toolbar color="primary"> <ion-searchbar (input)="getItems($event)">ion-searchbar> ion-toolbar> ion-header> <ion-content> <ion-list> <ion-item *ngFor="let item of items"> {{ item }} ion-item> ion-list> ion-content>