Skip to main content
Version: 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

Descriptiontrueの場合、ユーザーはスライドアイテムを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse

イベント

NameDescription
ionDragスライド位置が変化したときに発行されます。

メソッド

close

Descriptionスライドしているアイテムを閉じる。アイテムはリストからも閉じることができます。
Signatureclose() => Promise<void>

closeOpened

Descriptionリスト内のスライドアイテムをすべて閉じます。アイテムは、リストからも閉じることができます。
SignaturecloseOpened() => Promise<boolean>

getOpenAmount

Descriptionアイテムが開いている量をピクセル単位で取得します。
SignaturegetOpenAmount() => Promise<number>

getSlidingRatio

Descriptionオプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、その項目は選択肢の幅より多く開いていることになります。
SignaturegetSlidingRatio() => Promise<number>

open

Descriptionスライド式の項目を開く。
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.