ion-item-sliding
滑动项包含一个可以拖动以显示选项按钮的项。它需要一个 item 组件作为子组件。所有要显示的选项应放在 item options 元素中。
🌐 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）的情况下从左向右滑动时，会显示选项。若要将其放置 在相反的一侧，使其在向相反方向滑动时显示，请在 item options 元素上将 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> |
| 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 阴影部分
🌐 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.