メインコンテンツまでスキップ
Version: v6

ion-item-sliding

Contents

item-slidingには、Buttonを表示するためにドラッグできるItemを含む必要があるため、itemコンポーネントを子要素に配置します。表示するすべてのオプションは、item options要素に配置する必要があります。

Swipe Direction

デフォルトでは、ボタンは "end" 側に配置されます。つまり、スライドするItemを最後から最初にスワイプすると、オプションが表示されます。LTRでは右から左、RTLでは左から右です。反対側に配置するには、反対方向にスワイプすると表示されるように、[ion-item-options]((item-options.md)要素の side 属性を "start" に設定します。最大2つの ion-item-options を同時に使用して、スワイプ方向に応じて2つの異なるオプションセットを表示できます。

レイアウトのオプション

デフォルトでは、iconを item option内にtextとともに配置すると、iconはtextの上に表示されますが、icon slotを次のいずれかに変更してオプション内に配置することができます。

SlotDescription
startIn LTR, start is the left side of the button, and in RTL it is the right
topThe icon is above the text
icon-onlyThe icon is the only content of the button
bottomThe icon is below the text
endIn LTR, end is the right side of the button, and in RTL it is the left

拡張可能なオプション

特定のポイントをスワイプすると、オプションを展開してアイテムの幅全体を表示できます。これを ionSwipe イベントと組み合わせて、classのmethodを呼び出すことができます。

Interfaces

ItemSlidingCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface ItemSlidingCustomEvent extends CustomEvent {
target: HTMLIonItemSlidingElement;
}

Usage

<ion-list>
<!-- Sliding item with text options on both sides -->
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
<ion-item-option color="danger" (click)="share(item)">Share</ion-item-option>
</ion-item-options>

<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>

<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>

<!-- Sliding item with expandable options on both sides -->
<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 Options</ion-label>
</ion-item>

<ion-item-options side="end">
<ion-item-option color="tertiary" expandable>
Archive
</ion-item-option>
</ion-item-options>
</ion-item-sliding>

<!-- Multi-line sliding item with icon options on both sides -->
<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>HubStruck Notifications</h2>
<p>A new message in your network</p>
<p>Oceanic Next has joined your network</p>
</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>

<!-- Sliding item with icon start options on end side -->
<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" ios="ellipsis-horizontal" md="ellipsis-vertical"></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>

<!-- Sliding item with icon end options on end side -->
<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" ios="ellipsis-horizontal" md="ellipsis-vertical"></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>

<!-- Sliding item with icon top options on end side -->
<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" ios="ellipsis-horizontal" md="ellipsis-vertical"></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>

<!-- Sliding item with icon bottom options on end side -->
<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" ios="ellipsis-horizontal" md="ellipsis-vertical"></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>

Properties

disabled

DescriptionIf true, the user cannot interact with the sliding item.
Attributedisabled
Typeboolean
Defaultfalse

Events

NameDescription
ionDragEmitted when the sliding position changes.

Methods

close

DescriptionClose the sliding item. Items can also be closed from the List.
Signatureclose() => Promise<void>

closeOpened

DescriptionClose all of the sliding items in the list. Items can also be closed from the List.
SignaturecloseOpened() => Promise<boolean>

getOpenAmount

DescriptionGet the amount the item is open in pixels.
SignaturegetOpenAmount() => Promise<number>

getSlidingRatio

DescriptionGet the ratio of the open amount of the item compared to the width of the options.
If the number returned is positive, then the options on the right side are open.
If the number returned is negative, then the options on the left side are open.
If the absolute value of the number is greater than 1, the item is open more than
the width of the options.
SignaturegetSlidingRatio() => Promise<number>

open

DescriptionOpen the sliding item.
Signatureopen(side: Side | undefined) => Promise<void>