ion-item-sliding

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

基本的な使い方

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

Icon Options

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

拡張可能なオプション

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

Interfaces

ItemSlidingCustomEvent

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

interface ItemSlidingCustomEvent extends CustomEvent {
  target: HTMLIonItemSlidingElement;
}

プロパティ

disabled

Description	trueの場合、ユーザーはスライドアイテムを操作することができません。
Attribute	disabled
Type	boolean
Default	false

イベント

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

メソッド

close

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

closeOpened

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

getOpenAmount

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

getSlidingRatio

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

open

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