ion-item-sliding

滑动项目包含一个可以拖拽以显示选项按钮的项目。它需要一个 item 组件作为子元素。要显示的所有选项都应放置在 item options 元素中。

基本用法

滑动项目选项默认放置在项目的 "end" 侧。这意味着当项目从 end 向 start 方向滑动时（即 LTR 中从右向左，RTL 中从左向右）会显示选项。要将它们放在相反侧，使其在反向滑动时显示，请在 item options 元素上将 side 属性设置为 "start"。最多可以同时使用两个 item options，以根据不同滑动方向显示两组不同的选项。

图标选项

当在 item option 中将图标与文本并排放置时，默认情况下图标会显示在文本上方。可以将图标上的插槽更改为任何可用的 item option 插槽 来更改其位置。

可展开选项

如果您滑动超过某个点，选项可以展开以占据父级 ion-item 的完整宽度。这可以与 item options 上的 ionSwipe 事件结合使用，在项目完全滑动时调用方法。

接口

ItemSlidingCustomEvent

虽然不是必需的，但此接口可用于替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface ItemSlidingCustomEvent extends CustomEvent {
  target: HTMLIonItemSlidingElement;
}

属性

disabled

说明	If true, the user cannot interact with the sliding item.
属性	disabled
类型	boolean
默认值	false

事件

Name	说明	冒泡
ionDrag	Emitted when the sliding position changes.	true

方法

close

说明	Close the sliding item. Items can also be closed from the List.
签名	close() => Promise<void>

closeOpened

说明	Close all of the sliding items in the list. Items can also be closed from the List.
签名	closeOpened() => Promise<boolean>

getOpenAmount

说明	Get the amount the item is open in pixels.
签名	getOpenAmount() => Promise<number>

getSlidingRatio

说明	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.
签名	getSlidingRatio() => Promise<number>

open

说明	Open the sliding item.
签名	open(side: Side ｜ undefined) => Promise<void>
参数	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

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。