ion-reorder
重新排序是一個元件,允許拖曳項目以變更項目群組內的順序。它必須在重新排序群組中使用,以提供視覺化的拖放介面。
重新排序是拖放項目的錨點。重新排序完成後,`ionItemReorder` 事件將從重新排序群組中發出,並且需要呼叫 `complete` 方法。
基本用法
重新排序最基本的範例是將其插入項目內。依預設,重新排序群組的重新排序功能會停用。可以透過將重新排序群組的 `disabled` 屬性設定為 `false` 來啟用。然後可以使用重新排序圖示來拖放項目並重新排序。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
切換重新排序
在某些情況下,可能需要選擇性地切換重新排序功能。這可以透過使 `disabled` 屬性根據函數或變數產生反應來完成。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
自訂重新排序圖示
重新排序元件在 iOS 上使用三條線的重新排序圖示,在 Material Design 上則使用兩條線。可以透過在重新排序內新增一個圖示元件,並使用任何可用的 Ionicons 來進行自訂。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
重新排序包裝函式
重新排序也可以用作項目周圍的包裝函式,使項目本身成為錨點。按一下下方項目上的任何位置,然後拖曳它以重新排序清單。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
更新資料
當在沒有參數的情況下於重新排序群組上呼叫 `complete` 方法時,DOM 節點將會重新排序。如果這些項目是從需要排序的資料陣列轉譯而來,可能會導致資料和 DOM 不同步。
為了在重新排序完成後對陣列進行排序,應該將陣列作為參數傳遞至 `complete` 方法。`complete` 方法將對陣列進行排序並傳回它,以便重新指派。請注意,傳遞陣列將會阻止 Ionic 重新排序 DOM 節點。
在某些情況下,應用程式可能需要自行重新排序陣列和 DOM 節點。如果需要這樣做,則應將 `false` 作為參數傳遞至 `complete` 方法。這將阻止 Ionic 重新排序重新排序群組內的任何 DOM 節點。
無論採用哪種方法,如果以迴圈提供,都應該為重新排序的項目提供穩定的身分。這表示 Angular 使用 `trackBy`,而 React 和 Vue 使用 `key`。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
搭配虛擬捲動使用
重新排序需要捲動容器才能正常運作。當使用虛擬捲動解決方案時,需要提供自訂捲動目標。需要停用內容上的捲動,並且需要將 `.ion-content-scroll-host` 類別新增至負責捲動的元素。
主控台
從上述範例記錄時,主控台訊息將會顯示在此處。
屬性
此元件沒有可用的屬性。
事件
此元件沒有可用的事件。
方法
此元件沒有可用的公用方法。
CSS 陰影部分
名稱 | 描述 |
---|---|
icon | 重新排序控點的圖示(使用 ion-icon)。 |
CSS 自訂屬性
此元件沒有可用的 CSS 自訂屬性。
插槽
此元件沒有可用的插槽。