ion-item-sliding
スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として item コンポーネントが必要です。表示させるオプションはすべて item options 要素に記述する必要があります。
基本的な使い方
スライドアイテムのオプションは、デフォルトではアイテムの "end" 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 item options 要素の side 属性を "start" に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。
Icon Options
アイテムオプション でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な アイテムオプションスロット に変更することで位置を変更することが可能です。
拡張可能なオプション
オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 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 | 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 | スライド式の項目を開く。 |
| 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.