ion-reorder
Reorderは、アイテムをドラッグしてアイテムグループ内の順序を変更できるコンポーネントです。視覚的なドラッグアンドドロップインターフェイスを提供するために、reorder group内で使用する必要があります。
reorderは、アイテムをドラッグアンドドロップするために使用されるアンカーです。reorderが完了すると、reorder groupからionItemReorderイベントがディスパッチされ、completeメソッドを呼び出す必要があります。
基本的な使い方
reorderの最も基本的な例は、アイテム内にスロットすることです。デフォルトでは、reorderグループのreorder機能は無効になっています。reorderグループのdisabledプロパティをfalseに設定することで有効にできます。reorderアイコンを使用して、アイテムをドラッグアンドドロップして並べ替えることができます。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。Reorderの切り替え
場合によっては、reorder機能を切り替えるオプションが必要になることがあります。これは、関数または変数に基づいて、disabledプロパティをリアクティブにすることで実現できます。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。カスタムReorderアイコン
reorderコンポーネントは、iOSでは3本の線、Material Designでは2本の線を持つreorderアイコンを使用します。これは、利用可能なIoniconsのいずれかを使用して、reorderの内側にIconコンポーネントを追加することでカスタマイズできます。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。Reorderラッパー
reorderは、アイテム自体をアンカーとして、アイテムの周りのラッパーとしても使用できます。下のアイテムの任意の場所をクリックし、ドラッグしてリストを並べ替えます。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。データの更新
パラメータなしでreorderグループでcompleteメソッドが呼び出されると、DOMノードが並べ替えられます。アイテムが並べ替える必要があるデータの配列からレンダリングされる場合、これによりデータとDOMの同期が失われる可能性があります。
reorderの完了時に配列を並べ替えるには、配列をパラメータとしてcompleteメソッドに渡す必要があります。completeメソッドは配列を並べ替え、再割り当てできるように返します。配列を渡すと、IonicがDOMノードを並べ替えるのを防ぐことに注意してください。
場合によっては、アプリが配列とDOMノードの両方を独自に並べ替える必要がある場合があります。これが必要な場合は、falseをパラメータとしてcompleteメソッドに渡す必要があります。これにより、Ionicがreorderグループ内のDOMノードを並べ替えるのを防ぎます。
どのアプローチをとるかに関係なく、ループで提供される場合は、並べ替えアイテムに安定したIDを提供する必要があります。これは、Angularの場合はtrackBy、ReactとVueの場合はkeyを使用することを意味します。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。仮想スクロールでの使用
reorderが正常に機能するには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に.ion-content-scroll-hostクラスを追加する必要があります。
コンソール上記の例からログが記録されると、ここにコンソールメッセージが表示されます。プロパティ
このコンポーネントで使用できるプロパティはありません。
イベント
このコンポーネントで使用できるイベントはありません。
メソッド
このコンポーネントで使用できるパブリックメソッドはありません。
CSSシャドウパーツ
| 名前 | 説明 |
|---|---|
icon | reorderハンドルのアイコン（ion-iconを使用）。 |
CSSカスタムプロパティ
このコンポーネントで使用できるCSSカスタムプロパティはありません。
スロット
このコンポーネントで使用できるスロットはありません。