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.