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 | If true, the user cannot interact with the sliding item. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
イベント
| Name | Description |
|---|---|
ionDrag | Emitted when the sliding position changes. |
メソッド
close
| Description | Close the sliding item. Items can also be closed from the List. |
| Signature | close() => Promise<void> |
closeOpened
| Description | Close all of the sliding items in the list. Items can also be closed from the List. |
| Signature | closeOpened() => Promise<boolean> |
getOpenAmount
| Description | Get the amount the item is open in pixels. |
| Signature | getOpenAmount() => Promise<number> |
getSlidingRatio
| Description | Get 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. |
| Signature | getSlidingRatio() => Promise<number> |
open
| Description | Open the sliding item. |
| 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.