shadowReorderは、アイテムのグループ内での順序を変更するためにアイテムをドラッグできるようにするコンポーネントです。視覚的なドラッグ＆ドロップのインターフェイスを提供するために、reorder group内で使用されなければなりません。
Reorderはアイテムをドラッグ＆ドロップするためのアンカーです。reorderが完了すると、reorder groupから ionItemReorder イベントがdispatchされ、complete メソッドを呼び出す必要があります。
Reorderの最も基本的な例は、アイテムの中にスロットを入れることです。デフォルトでは、reorder groupのreorder機能は無効になっています。reorder groupの disabled プロパティを false に設定することで有効にすることができます。Reorderアイコンを使ってアイテムをドラッグ＆ドロップし、並び替えることができます。
場合によっては、並べ替えの機能を切り替えるオプションが欲しいかもしれない。これは、関数や変数に基づいて disabled プロパティをリアクティブにすることで実現できます。
Reorderコンポーネントは、iOSでは3行、Material Designでは2行のReorderアイコンを使用しています。これは、利用可能なIoniconのいずれかを使って、Reorderの中にIconコンポーネントを追加することでカスタマイズできます。
並び替えは、項目を囲むラッパーとして使うこともできます。下の項目のどこかをクリックし、ドラッグすると、リストの順番を入れ替えることができます。
パラメータを指定せずに reorder グループに対して complete メソッドを呼び出すと、DOM ノードが並べ替えられます。項目がソートが必要なデータの配列からレンダリングされた場合、データと DOM が同期しないことがあります。並べ替えの完了時に配列をソートするには、complete メソッドのパラメータとして配列を渡す必要があります。 completeメソッドは配列をソートして返し、再代入できるようにしてください。
場合によっては、アプリが独自に配列と DOM ノードの両方を並べ替える必要があるかもしれません。その場合は complete メソッドに false をパラメータとして渡す必要があります。これにより、Ionicはreorder group内のDOMノードの並び替えを行わないようになります。
Reorderを正しく動作させるには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを指定する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。
No properties available for this component.
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
icon | リオーダーハンドルのアイコンです（ion-iconを使用）。 |
No CSS custom properties available for this component.
No slots available for this component.