ion-item-sliding
Ionic4项目中我们可以使用Ionic4列表项组件ion-item-sliding对项目进行布局。 ion-item-sliding官方文档地址:https://ionicframework.com/docs/api/item-slidingA sliding item contains an item that can be dragged to reveal buttons. It requires an
Swipe Direction
By default, the buttons are placed on the "end"
side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side
attribute to "start"
on the [ion-item-options
]((../item-options) element. Up to two ion-item-options
can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
Options Layout
By default if an icon is placed with text in the
Slot | description |
---|---|
start |
In LTR, start is the left side of the button, and in RTL it is the right |
top |
The icon is above the text |
icon-only |
The icon is the only content of the button |
bottom |
The icon is below the text |
end |
In LTR, end is the right side of the button, and in RTL it is the left |
Expandable Options
Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe
event to call methods on the class.
ion-item-sliding 用法(Usage)
<ion-list>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)">Favoriteion-item-option>
<ion-item-option color="danger" (click)="share(item)">Shareion-item-option>
ion-item-options>
<ion-item>
<ion-label>Item Optionsion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="danger" expandable>
Delete
ion-item-option>
ion-item-options>
<ion-item>
<ion-label>Expandable Optionsion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option color="tertiary" expandable>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>HubStruck Notificationsh2>
<p>A new message in your networkp>
<p>Oceanic Next has joined your networkp>
ion-label>
<ion-note slot="end">
10:45 AM
ion-note>
ion-item>
<ion-item-options side="start">
<ion-item-option>
<ion-icon slot="icon-only" name="heart">ion-icon>
ion-item-option>
ion-item-options>
<ion-item-options side="end">
<ion-item-option color="danger">
<ion-icon slot="icon-only" name="trash">ion-icon>
ion-item-option>
<ion-item-option>
<ion-icon slot="icon-only" name="star">ion-icon>
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Start
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="start" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="start" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons End
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="end" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="end" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Top
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="top" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="top" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Bottom
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="bottom" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="bottom" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
ion-list>
<ion-list>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option onClick="favorite(item)">Favoriteion-item-option>
<ion-item-option color="danger" onClick="share(item)">Shareion-item-option>
ion-item-options>
<ion-item>
<ion-label>Item Optionsion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option onClick="unread(item)">Unreadion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="danger" expandable>
Delete
ion-item-option>
ion-item-options>
<ion-item>
<ion-label>Expandable Optionsion-label>
ion-item>
<ion-item-options side="end">
<ion-item-option color="tertiary" expandable>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>HubStruck Notificationsh2>
<p>A new message in your networkp>
<p>Oceanic Next has joined your networkp>
ion-label>
<ion-note slot="end">
10:45 AM
ion-note>
ion-item>
<ion-item-options side="start">
<ion-item-option>
<ion-icon slot="icon-only" name="heart">ion-icon>
ion-item-option>
ion-item-options>
<ion-item-options side="end">
<ion-item-option color="danger">
<ion-icon slot="icon-only" name="trash">ion-icon>
ion-item-option>
<ion-item-option>
<ion-icon slot="icon-only" name="star">ion-icon>
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Start
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="start" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="start" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons End
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="end" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="end" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Top
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="top" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="top" name="archive">ion-icon>
Archive
ion-item-option>
ion-item-options>
ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
Sliding Item, Icons Bottom
ion-label>
ion-item>
<ion-item-options>
<ion-item-option color="primary">
<ion-icon slot="bottom" name="more">ion-icon>
More
ion-item-option>
<ion-item-option color="secondary">
<ion-icon slot="bottom" name="archive">