ItemSliding
ion-item-sliding
滑动项是可以滑动以显示按钮的列表项。它需要一个Item组件作为一个孩子,一个List组件作为父项。所有显示的按钮都可以放在<ion-item-options>
元素中。
用法
<ion-list>
<ion-item-sliding #item>
<ion-item>
Item
</ion-item>
<ion-item-options side="left">
<button ion-button (click)="favorite(item)">Favorite</button>
<button ion-button color="danger" (click)="share(item)">Share</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button (click)="unread(item)">Unread</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
滑动方向
默认情况下,当滑动项目从右向左滑动时,按钮被显示,因此按钮位于右侧。但是也可以通过设置元素side
上的属性来显示它们在右侧(从左到右滑动)ion-item-options
。最多ion-item-options
可以同时使用2个,以便根据切换方向显示两组不同的按钮。
<ion-item-options side="right">
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
<ion-item-options side="left">
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
聆听事件(ionDrag)和(ionSwipe)
可以通过订阅(ionDrag)事件知道滑动项目的当前相对位置。
<ion-item-sliding (ionDrag)="logDrag($event)">
<ion-item>Item</ion-item>
<ion-item-options>
<button ion-button>Favorite</button>
</ion-item-options>
</ion-item-sliding>
按钮布局
如果在选项按钮中放置了带有文本的图标,则默认情况下将显示文本顶部的图标。可以通过设置元素icon-start
的属性 来更改文本左侧的图标<ion-item-options>
。
<ion-item-options icon-start>
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
可扩展选项
如果您滑过某一点,则可以扩展选项以占用该项目的全部宽度。这可以与ionSwipe
在类上调用方法的事件相结合。
<ion-item-sliding (ionSwipe)="delete(item)">
<ion-item>Item</ion-item>
<ion-item-options>
<button ion-button expandable (click)="delete(item)">Delete</button>
</ion-item-options>
</ion-item-sliding>
我们可以delete
通过点击按钮或通过对项目进行全面刷卡来打电话。
实例成员
close()
关闭滑动项目。项目也可以从列表关闭。
可以通过抓取参考来关闭滑动项目ItemSliding
。在下面的示例中,模板引用变量slidingItem
放在元素上并传递给该share
方法。
<ion-list>
<ion-item-sliding #slidingItem>
<ion-item>
Item
</ion-item>
<ion-item-options>
<button ion-button (click)="share(slidingItem)">Share</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';
@Component({...})
export class MyClass {
constructor() { }
share(slidingItem: ItemSliding) {
slidingItem.close();
}
}
输出事件
ATTR | 细节 |
---|---|
ionDrag | 当滑动位置发生变化时发出。它报告相对位置。 |
Sass变量
属性 | 默认 | 描述 |
---|---|---|
$item-ios-body-text-font-size | 1.7rem | 项目文本的字体大小 |
$item-ios-paragraph-margin-top | 0 | 物品段落的保证金顶部 |
$item-ios-paragraph-margin-end | 0 | 项目段落的保证金结束 |
$item-ios-paragraph-margin-bottom | 2px | 物品段落的边缘底部 |
$item-ios-paragraph-margin-start | $item-ios-paragraph-margin-end | 项目段落的保证金开始 |
$item-ios-paragraph-font-size | 1.4rem | 项目段落的字体大小 |
$item-ios-paragraph-text-color | #8e9093 | 项目段落的颜色 |
$item-ios-avatar-size | 36px | 物品中头像的大小 |
$item-ios-avatar-border-radius | 50% | 物品中头像的边框半径 |
$item-ios-thumbnail-size | 56px | 项目中缩略图的大小 |
$item-ios-detail-push-show | true | 显示项目上的详细箭头图标 |
$item-ios-detail-push-color | $list-ios-border-color | 详细箭头图标的颜色 |
$item-ios-detail-push-svg | "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>" | 详细箭头图标 |
$item-ios-divider-background | #f7f7f7 | 分隔线的背景 |
$item-ios-divider-color | #222 | 分色器的颜色 |
$item-ios-sliding-content-background | $list-ios-background-color | 滑动内容的背景 |