ion-item-sliding
滑动项目包含可以拖动以显示选项按钮的项目。它需要 item 组件作为子组件。所有要显示的选项都应放置在 项目选项 元素中。
¥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
滑动项目选项默认放置在项目的 "end" 侧。这意味着当从头到尾滑动项目时，即在 LTR 中从右向左滑动，但在 RTL 中从左向右滑动时，会显示选项。要将它们放置在相反的一侧，以便在向相反方向滑动时显示它们，请将 项目选项 元素上的 side 属性设置为 "start"。最多可以同时使用两个项目选项，以便根据滑动方向显示两组不同的选项。
¥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
如果你滑过某个点，选项可以展开以占据父 ion-item 的整个宽度。这可以与 项目选项 上的 ionSwipe 事件结合起来，在项目完全滑动时调用方法。
¥Options can be expanded to take up the full width of the parent ion-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
虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。
¥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 | If true, the user cannot interact with the sliding item. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
事件
¥Events
| Name | Description | Bubbles |
|---|---|---|
ionDrag | Emitted when the sliding position changes. | true |
方法
¥Methods
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 阴影部分
¥CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
¥CSS Custom Properties
No CSS custom properties available for this component.
插槽
¥Slots
No slots available for this component.