Skip to content
wenbobao edited this page Oct 12, 2017 · 2 revisions

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

当项目可以被clickedtapped时,属性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

Sass Variables

查询地址

Clone this wiki locally