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

ion-reorder

shadow

コンテンツ

Reorderは、Itemをドラッグして順序を変更できるようにするコンポーネントです。視覚的なドラッグ&ドロップインターフェイスを提供するために、 ion-reorder-group 内で使用する必要があります。

ion-reorder は、ion-reorder-group 内でアイテムをドラッグ&ドロップするためのアンカーです。Reorder operationの実行方法の詳細については、Reorder Groupを参照してください。

使い方

<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group disabled="false">
<!-- Default reorder icon, end aligned items -->
<ion-item>
<ion-label>
Item 1
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>

<ion-item>
<ion-label>
Item 2
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>

<!-- Default reorder icon, start aligned items -->
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label>
Item 3
</ion-label>
</ion-item>

<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label>
Item 4
</ion-label>
</ion-item>

<!-- Custom reorder icon end items -->
<ion-item>
<ion-label>
Item 5
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>

<ion-item>
<ion-label>
Item 6
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>

<!-- Items wrapped in a reorder, entire item can be dragged -->
<ion-reorder>
<ion-item>
<ion-label>
Item 7
</ion-label>
</ion-item>
</ion-reorder>

<ion-reorder>
<ion-item>
<ion-label>
Item 8
</ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>

プロパティ

No properties available for this component.

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
iconThe icon of the reorder handle (uses ion-icon).

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.

View Source