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