メインコンテンツまでスキップ
バージョン: v7

ion-item-sliding

スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として item コンポーネントが必要です。表示させるオプションはすべて item options 要素に記述する必要があります。

基本的な使い方

スライドアイテムのオプションは、デフォルトではアイテムの "end" 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 item options 要素の side 属性を "start" に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。

Icon Options

アイテムオプション でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な アイテムオプションスロット に変更することで位置を変更することが可能です。

拡張可能なオプション

オプションは、スワイプがあるポイントを超えると、親となる ion-item の幅いっぱいに展開されます。これは、item optionsionSwipe イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。

Interfaces

ItemSlidingCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ItemSlidingCustomEvent extends CustomEvent {
target: HTMLIonItemSlidingElement;
}

プロパティ

disabled

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

イベント

NameDescription
ionDragEmitted when the sliding position changes.

メソッド

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>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.