ion-item-sliding
スライディングアイテムは、ドラッグしてオプションボタンを表示できるアイテムを含んでいます。子要素として item コンポーネントが必要です。表示するすべてのオプションは、item options 要素に配置する必要があります。
基本的な使い方
スライディングアイテムのオプションは、デフォルトでアイテムの "end" 側に配置されます。これは、アイテムを終端から開始に向かってスワイプするとオプションが表示されることを意味します。つまり、LTRでは右から左へ、RTLでは左から右へスワイプします。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、item options 要素の side 属性を "start" に設定します。スワイプの方向に応じて2つの異なるオプションセットを表示するために、最大2つのアイテムオプションを同時に使用できます。
アイコンオプション
item option のテキストと一緒にアイコンを配置すると、デフォルトではアイコンがテキストの上に表示されます。アイコンのスロットは、利用可能な item option スロット のいずれかに変更して、その位置を変更できます。
拡張可能なオプション
特定の位置を過ぎてスワイプすると、オプションを拡張して親の ion-item の全幅を占めるようにできます。これは、item options の ionSwipe イベントと組み合わせて、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。
インターフェース
ItemSlidingCustomEvent
必須ではありませんが、このインターフェースは、このコンポーネントから発行される Ionic イベントのより強力な型付けのために、CustomEvent インターフェースの代わりに使用できます。
interface ItemSlidingCustomEvent extends CustomEvent {
target: HTMLIonItemSlidingElement;
}
プロパティ
disabled
| 説明 | true の場合、ユーザーはスライディングアイテムを操作できません。 |
| 属性 | disabled |
| 型 | boolean |
| デフォルト | false |
イベント
| 名前 | 説明 | バブル |
|---|---|---|
ionDrag | スライディング位置が変更されたときに発行されます。 | true |
メソッド
close
| 説明 | スライディングアイテムを閉じます。アイテムは、List からも閉じることができます。 |
| 署名 | close() => Promise<void> |
closeOpened
| 説明 | リスト内のすべてのスライディングアイテムを閉じます。アイテムは、List からも閉じることができます。 |
| 署名 | closeOpened() => Promise<boolean> |
getOpenAmount
| 説明 | アイテムが開いている量をピクセル単位で取得します。 |
| 署名 | getOpenAmount() => Promise<number> |
getSlidingRatio
| 説明 | アイテムの開き量とオプションの幅の比率を取得します。返される数値が正の場合、右側のオプションが開いています。返される数値が負の場合、左側のオプションが開いています。数値の絶対値が1より大きい場合、アイテムはオプションの幅よりも大きく開いています。 |
| 署名 | getSlidingRatio() => Promise<number> |
open
| 説明 | スライディングアイテムを開きます。 |
| 署名 | open(side: Side ｜ undefined) => Promise<void> |
CSSシャドウパーツ
このコンポーネントには、利用可能なCSSシャドウパーツはありません。
CSSカスタムプロパティ
このコンポーネントには、利用可能なCSSカスタムプロパティはありません。
スロット
このコンポーネントには、利用可能なスロットはありません。