跳到主要内容
版本：v8

滑动项组件

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

基本用法​

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

import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
  version="8"
  code={{
    javascript,
    react,
    vue,
    angular: {
      files: {
        'src/app/example.component.html': angular_example_component_html,
        'src/app/example.component.ts': angular_example_component_ts,
      },
    },
  }}
  src="usage/v8/item-sliding/basic/demo.html"
/>

图标选项​

当图标与文本一起放置在 item option 中时，默认会将图标显示在文本上方。可以通过更改图标上的 slot 属性为任何可用的 item option slots 来改变其位置。

可扩展选项​

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

接口​

ItemSlidingCustomEvent​

虽然不是必需的，但此接口可用于替代 CustomEvent 接口，以便对此组件发出的 Ionic 事件进行更严格的类型检查。

interface ItemSlidingCustomEvent extends CustomEvent {
  target: HTMLIonItemSlidingElement;
}

属性​

disabled​

DescriptionIf true, the user cannot interact with the sliding item.
Attributedisabled
Typeboolean
Defaultfalse

事件​

NameDescriptionBubbles
ionDragEmitted when the sliding position changes.true

方法​

close​

DescriptionClose the sliding item. Items can also be closed from the List.
Signatureclose() => Promise<void>

closeOpened​

DescriptionClose all of the sliding items in the list. Items can also be closed from the List.
SignaturecloseOpened() => Promise<boolean>

getOpenAmount​

DescriptionGet the amount the item is open in pixels.
SignaturegetOpenAmount() => Promise<number>

getSlidingRatio​

DescriptionGet 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.
SignaturegetSlidingRatio() => Promise<number>

open​

DescriptionOpen the sliding item.
Signatureopen(side: Side ｜ undefined) => Promise<void>
Parametersside: 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.

Contents

编辑此页