ion-item-sliding
滑动条目包含一个可以通过拖动来显示操作按钮的条目。它需要一个 item 组件作为子元素。所有要显示的操作选项都应放置在 item options 元素中。
基本用法
滑动条目的操作选项默认放置在条目的 "end" 侧。这意味着当从结束侧向起始侧滑动条目时（即在 LTR 语言环境下从右向左滑动，在 RTL 语言环境下从左向右滑动）会显示操作选项。若要将它们放置在相反的一侧，以便在相反方向的滑动时显示，请在 item options 元素上设置 side 属性为 "start"。最多可以同时使用两个 item options，以便根据滑动方向显示两组不同的操作选项。
图标选项
当图标与文本一起放置在 item option 中时，默认情况下图标会显示在文本上方。可以通过更改图标上的 slot 属性为任何可用的 item option slots 来改变其位置。
可扩展选项
如果你滑动超过某个点，操作选项可以扩展以占据父级 ion-item 的全部宽度。这可以与 item options 上的 ionSwipe 事件结合使用，以便在条目完全滑动时调用方法。
接口
ItemSlidingCustomEvent
虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便为此组件发出的 Ionic 事件提供更强的类型定义。
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 | Bubbles |
|---|---|---|
ionDrag | Emitted when the sliding position changes. | true |
方法
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> |
| Parameters | side: The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item. |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
No CSS custom properties available for this component.
插槽
No slots available for this component.