メインコンテンツまでスキップ
Version: v6

ion-item-sliding

コンテンツ

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" に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。

Icon Options

アイテムオプション でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な アイテムオプションスロット に変更することで位置を変更することが可能です。

拡張可能なオプション

オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 item optionsionSwipe イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。

Interfaces

ItemSlidingCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ItemSlidingCustomEvent extends CustomEvent {
target: HTMLIonItemSlidingElement;
}

Properties

disabled

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

イベント

NameDescription
ionDragEmitted when the sliding position changes.

メソッド

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>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.