Item

ion-list-header,ion-item,[ion-item],ion-item-divider 一个ion-item可以包含文本、图像和其他任何东西。一般来说，它与其他item被放置在ion-list中。它很容易被swiped、删除、重新排序、编辑等等。。它需要一个ItemSliding包装器元素以被swiped。

基本用法

As an Element

A basic item

<ion-item>
  Item
</ion-item>

A list header

<ion-list-header>
  List Header
</ion-list-header>

An item divider

<ion-item-divider>
  Item Divider
</ion-item-divider>

As an Attribute

当项目可以被clicked或tapped时，属性ion-item可以添加到<button>中。当项目需要包含href时，它应该被添加到<a>元素中。可以将其添加为任何元素的属性，以进行项样式化。

<button ion-item (click)="buttonClick()">
  Button Item
</button>

<a ion-item href="https://www.ionicframework.com">
  Anchor Item
</a>

注意： 不要将ion-item作为属性，添加到<ion-list-header> or <ion-item-divider>中， 因为它们已经是一个 item。

Detail Arrows

默认情况下 <button> and <a>元素含有ion-item 属性时，将在iOS模式下先是一个右箭头图标。 隐藏图标需要在元素中添加属性detail-none， 如果需要显示的显示有图标，添加属性 detail-push

<ion-item detail-push>
  Item with Detail Arrow
</ion-item>

<button ion-item (click)="buttonClick()">
  Button Item with Detail Arrow
</button>

<a ion-item detail-none href="https://www.ionicframework.com">
  Anchor Item with no Detail Arrow
</a>

Item Placement (项目位置)

用法

<ion-list>

  <ion-list-header>
    Header
  </ion-list-header>

  <ion-item>
    Item
  </ion-item>

  <ion-item detail-push>
    Item with Detail Arrow
  </ion-item>

  <button ion-item (click)="buttonClick()">
    Button Item
  </button>

  <ion-item-divider>
    Item Divider
  </ion-item-divider>

  <button ion-item detail-none (click)="buttonClick()">
    Button Item with no Detail Arrow
  </button>

  <a ion-item href="https://www.ionicframework.com">
    Anchor Item
  </a>

  <ion-item no-lines>
    Item with no border
  </ion-item>

  <ion-item text-wrap>
    Multiline text that should wrap when it is too long
    to fit on one line in the item.
  </ion-item>

</ion-list>

Advanced

<ion-list>

  <!-- List header with buttons on each side -->
  <ion-list-header>
    <button ion-button item-start (click)="buttonClick()">Button</button>
    List Header
    <button ion-button outline item-end (click)="buttonClick()">Outline</button>
  </ion-list-header>

  <!-- Loops through and creates multiple items -->
  <ion-item *ngFor="let item of items">
    Item {{item}}
  </ion-item>

  <!-- Button item with an icon on the left -->
  <button ion-item>
    <ion-icon name="star" item-start></ion-icon>
    Button Item
  </button>

  <!-- Item with a label and content -->
  <ion-item>
    <ion-label>
      Item Label
    </ion-label>
    <div item-content>
      Item Content next to the label
    </div>
  </ion-item>

  <!-- Item with left and right buttons -->
  <ion-item>
    <button ion-button item-start (click)="buttonClick()">Button</button>
    Item
    <button ion-button outline item-end (click)="buttonClick()">Outline</button>
  </ion-item>

  <!-- Item divider with a right button -->
  <ion-item-divider>
    Item Divider
    <button ion-button item-end>Button</button>
  </ion-item-divider>

  <!-- Disabled button item with left and right buttons -->
  <button ion-item disabled>
    <button ion-button item-start (click)="buttonClick()">
      <ion-icon name="home"></ion-icon>
      Left Icon
    </button>
    Disabled Button Item
    <button ion-button outline item-end (click)="buttonClick()">
      <ion-icon name="star"></ion-icon>
      Left Icon
    </button>
  </button>

  <!-- Item with an avatar on the left and button on the right -->
  <ion-item>
    <ion-avatar item-start>
      <img src="img/my-avatar.png">
    </ion-avatar>
    Avatar Item
    <button ion-button outline item-end>View</button>
  </ion-item>

  <!-- Item with a thumbnail on the right -->
  <ion-item>
    <h2>Item</h2>
    <p>Item Paragraph</p>
    <ion-thumbnail item-end>
      <img src="img/my-thumbnail.png">
    </ion-thumbnail>
  </ion-item>

  <!-- Sliding item -->
  <ion-item-sliding>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button color="primary" (click)="archive()">Archive</button>
    </ion-item-options>
  </ion-item-sliding>

</ion-list>

Sass Variables

查询地址