4.组件(二)

May 23, 2018

Gestures

基本手势可以通过HTML绑定,包括tap，press，pan，swipe，rotate和pinch事件。

 <ion-card (tap)="tapEvent($event)">
    <ion-item>
      Tapped: {{tap}} times
    </ion-item>
  </ion-card>
  
  //.ts文件
  public tap :number = 0;
  tapEvent(e){
    this.tap++;
  }

Grid

Ionic的网格系统基于flexbox，网格由三个单元组成:网格grid，行row和列col。

网格系统由12列组成，可以通过设置col- 属性来确定每个离子列的大小。详情参阅https://ionicframework.com/docs/api/components/grid/Grid/

基本使用

不额外标明比例,col就是等宽的。

  <style>
    ion-col div {
      background-color: #f0f5ff;
      border: 1px solid #e6e9ee;
      border-radius: 2px;
      padding: 5px;
      text-align: center;
    }
    p {
      padding: 10px 0 0 10px !important;
      margin: 0;
    }
  </style>
  
 <ion-grid>
    <ion-row>
      <ion-col>
        <div>1 of 2</div>
      </ion-col>
      <ion-col>
        <div>2 of 2</div>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <div>1 of 3</div>
      </ion-col>
      <ion-col>
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <hr>

设置某个item宽度,其他未标明的比例均分

<ion-grid>
  <ion-row>
    <ion-col>
    <div>1</div>
    </ion-col>
    <ion-col col-6>
      <div>1/2 width</div>
    </ion-col>
    <ion-col>
      <div>3</div>
    </ion-col>
  </ion-row>
</ion-grid>

每个item设置宽度,超过12就会换行

  <ion-grid>
    <ion-row>
      <ion-col col-8 >
        <div>item1 9</div>
      </ion-col>
      <ion-col col-3 >
        <div>item2 3</div>
      </ion-col>
      <ion-col col-3 >
        <div>item2 3</div>
      </ion-col>
    </ion-row>
  </ion-grid>

col-auto

可变宽度,某个item自适应宽度col-auto，其他未标明的比例均分

<ion-grid>
    <ion-row>
      <ion-col>
        <div>1</div>
      </ion-col>
      <ion-col col-auto>
        <div>一个名字很长很长很长很长很长的人</div>
      </ion-col>
      <ion-col>
        <div>3</div>
      </ion-col>
    </ion-row>
  </ion-grid>

offset-x

可以控制距左侧的item的距离:

<ion-grid>
    <ion-row>
      <ion-col>
        <div>1</div>
      </ion-col>
      <ion-col offset-4>
        <div>2</div>
      </ion-col>
      <ion-col>
        <div>3</div>
      </ion-col>
    </ion-row>
  </ion-grid>

push and pull

变换位置

  <ion-grid>
    <ion-row>
      <ion-col col-9 push-3>
        <div>item1 9</div>
      </ion-col>
      <ion-col col-3 pull-9>
        <div>item2 3</div>
      </ion-col>
    </ion-row>
  </ion-grid>

垂直方向对齐方式

默认是顶部对齐

  <ion-grid>
    <ion-row>
      <ion-col>
        <div>xx1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4 <br>#</div>
      </ion-col>
      <ion-col>
        <div>3 of 4 <br>#<br>#</div>
      </ion-col>
      <ion-col>
        <div>4 of 4 <br>#<br>#<br>#</div>
      </ion-col>
    </ion-row>

    <ion-row align-items-start>
      <ion-col>
        <div>1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4</div>
      </ion-col>
      <ion-col>
        <div>3 of 4</div>
      </ion-col>
      <ion-col>
        <div>4 of 4 <br>#<br>#<br>#</div>
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col>
        <div>1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4</div>
      </ion-col>
      <ion-col>
        <div>3 of 4</div>
      </ion-col>
      <ion-col>
        <div>4 of 4 <br>#<br>#<br>#</div>
      </ion-col>
    </ion-row>

    <ion-row align-items-end>
      <ion-col>
        <div>1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4</div>
      </ion-col>
      <ion-col>
        <div>3 of 4</div>
      </ion-col>
      <ion-col>
        <div>4 of 4 <br>#<br>#<br>#</div>
      </ion-col>
    </ion-row>
  </ion-grid>

水平对齐方式

默认从居左

 <ion-grid>
    <ion-row justify-content-start>
      <ion-col col-3>
        <div>左对齐 1 of 2</div>
      </ion-col>
      <ion-col col-3>
        <div>左对齐 2 of 2</div>
      </ion-col>
    </ion-row>

    <ion-row justify-content-center>
      <ion-col col-3>
        <div>居中1 of 2</div>
      </ion-col>
      <ion-col col-3>
        <div>居中2 of 2</div>
      </ion-col>
    </ion-row>

    <ion-row justify-content-end>
      <ion-col col-3>
        <div>右对齐1 of 2</div>
      </ion-col>
      <ion-col col-3>
        <div>右对齐2 of 2</div>
      </ion-col>
    </ion-row>

    <ion-row justify-content-around>
      <ion-col col-3>
        <div>around对齐1 of 2</div>
      </ion-col>
      <ion-col col-3>
        <div>around对齐2 of 2</div>
      </ion-col>
    </ion-row>

    <ion-row justify-content-between>
      <ion-col col-3>
        <div>between对齐1 of 2</div>
      </ion-col>
      <ion-col col-3>
        <div>between对齐2 of 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>

icons

提供了700+ci icon

所有图标都有活动状态active和非活动状态inactive。活动图标通常是完整且厚实的，其中非活动图标被勾勒出来并且很薄。将isActive属性设置为true或false以更改图标的状态。认为激活状态。 (个人没发现什么区别)

<ion-icon name="heart"></ion-icon>
<ion-icon name="heart" isActive="false"></ion-icon>
<button ion-button clear> <ion-icon name="heart"></ion-icon> </button>

许多图标都有Material Design和iOS版本。Ionic将自动使用基于该平台的正确版本。要指定要用于每个平台的图标，请使用md和ios属性并提供平台特定的图标名称。

不同平台可以指定不同的图标

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

inputs

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

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

下面列出了许多可用于设置表单样式及其各种输入字段的属性。有关表单逻辑的更多信息，请查看Inputs API文档。

固定内联标签 fixed

<p>使用fixed可将标签放置在input element的左侧。 输入文本时，标签不会隐藏。 无论标签的长度如何，输入都将在同一位置对齐。 占位符文本可以与固定标签结合使用。</p>
  <ion-list>
    <ion-item>
      <ion-label fixed>usernameusernameusername</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
  </ion-list>

floating labels

编辑状态时，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-list>

    <ion-item>
      <ion-label>Username长氅changchangchang</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>

Inset Labels

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

 <p>将placeholder添加到input标签</p>
  <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

<p>堆叠标签将始终显示在输入顶部。
    将堆叠的属性添加到要使用的离子标签。
    占位符文本可以与堆叠标签结合使用。</p>
  <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>

https://ionicframework.com/docs/components/#navigation

Loading

基本使用:

import { LoadingController} from "ionic-angular";
...
showLoading(){
    let loading = this.loadingCtrl.create();
    loading.present();
}

//可以定义持续时间等
showLoading2(){
    let loading = this.loadingCtrl.create(
     {
       content:"Please wait...",
       duration:3000
     }
    );
    loading.present();
}

Lists

列表用于显示信息行，如联系人列表，播放列表或菜单。更多请查看List API docs和item Api

basic

//html文件
...
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{item}}
    </button>
  </ion-list>
  
  //ts文件
  ...
  items = [
    'Pokémon Yellow',
    'Super Metroid',
    'Mega Man X'
  ];

  itemSelected(item: string) {
    console.log("Selected Item", item);
  }
  ...

No lines

 <ion-list no-lines>
    <button ion-item *ngFor="let item of items">
      {{item}}
    </button>
  </ion-list>

Inset List

列表默认情况下没有 outside margin。要添加一个，将inset属性添加给ion-list组件

 <ion-list inset>
    <button ion-item *ngFor="let item of items">{{item}}</button>
  </ion-list>

List Dividers

分组，请使用<ion-item-group>而不是。配合使用<ion-item-divider>组件将组划分为多个部分.

<ion-item-group>
    <ion-item-divider>A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
    <ion-item-divider>B</ion-item-divider>
    <ion-item>Bngola</ion-item>
    <ion-item>Brgentina</ion-item>
  </ion-item-group>

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

图标的位置可以使用项目左侧属性和项目右侧属性进行设置。图标的大小默认为较小，并且可以使用较大的属性使其更大.

<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

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

 <ion-list>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/avatar-han.png">
      </ion-avatar>
      <h2>Han</h2>
      <p>Ugh. As if.</p>
    </ion-item>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/avatar-han.png">
      </ion-avatar>
      <h2>Han</h2>
      <p>Ugh. As if.</p>
    </ion-item>
  </ion-list>

Multi-line List

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

  <ion-list>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/avatar-han.png">
      </ion-avatar>
      <h2>Finn</h2>
      <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

item添加侧滑按钮: 支持向左或向右滑动以显示一组隐藏的按钮。要使用滑动项目，请在离子列表组件的内部添加一个ion-item-sliding组件。然后在ion-item-sliding内添加一个组件以包含按钮.

<ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-avatar item-start>
          <img src="assets/imgs/avatar-han.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

缩略图展示占据了item的整个高度。要使用缩略图，请在项目内添加组件<ion-thumbnail>。 The position of the thumbnail can be set using the item-left and item-right attributes:

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