跳到主要内容
版本:v6

ion-item-sliding

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

基本用法

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

图标选项

当图标与文本一起放置在项目选项(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说明冒泡
ionDragEmitted 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 阴影部分

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

CSS 自定义属性

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

插槽

该组件没有可用的插槽。