ion-item-sliding
A sliding item contains an item that can be dragged to reveal option buttons. It requires an item component as a child. All options to reveal should be placed in the item options element.
Basic Usage
Sliding item options are placed on the "end" side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to "start" on the item options element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
Icon Options
When an icon is placed alongside text in the item option, it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available item option slots to change its position.
Expandable Options
Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe event on the item options to call a method when the item is fully swiped.
Interfaces
ItemSlidingCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface ItemSlidingCustomEvent extends CustomEvent {
target: HTMLIonItemSlidingElement;
}
Properties
disabled
| Description | trueの場合、ユーザーはスライドアイテムを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
Events
| Name | Description |
|---|---|
ionDrag | スライド位置が変化したときに発行されます。 |
Methods
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 Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.