ion-reorder-group

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4排序组件ion-reorder-group对项目进行布局。ion-reorder-group中有ionic ion-reorder-group 用法(Usage) ,ionic ion-reorder-group 属性(Properties) ,ionic ion-reorder-group 事件(Events) ,ionic ion-reorder-group 内置方法(Methods)等

The reorder group is a wrapper component for items with the ion-reorder component, Check Reorder documentation for further information about the anchor component that is used to drag items within the ion-reorder-group list.

Once the user drags an item and drops it in a new position, the ionItemReorder event is dispatched. A handler for it must be implemented by the developer to commit changes.

reorderGroup.addEventListener('ionItemReorder', (ev) => {
  console.log(`Moving item from ${ev.detail.from} to ${ev.detail.to}`);

  this.dataList = reorderArray(this.dataList, ev.detail.from, ev.detail.to);
  ev.detail.complete();
});

The event's detail includes all the relevant information about the reorder operation, including the from and to indexes. The meaning of this indexes are pretty self-explanatory, the item from index X, moved to the index Y.

For example, in this list we move the item at index 0 to the index 3:

BEFORE | AFTER
  0    |   1
  1    |   2
  2    |   3
  3    |   0
  4    |   4
detail: {
  from: 0
  to: 3
}

Once the data structure has been updated to reflect the reorder change, the complete() method must be called. This method finishes the reorder operation and resets all the CSS transforms applied by the ion-reorder-group component.

Fortunately this complete() method can optionally accept an array as input and it will return a reordered copy, based in detail.from and detail.to.

this.dataList = reorderGroup.complete(this.dataList);

This utility is really handy when

ion-reorder-group 用法(Usage)

angular javascript
<ion-content>
  <ion-list>
    <ion-reorder-group>

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

      <ion-item>
        <ion-label>
          Item 2 (default ion-reorder slot="start")
        ion-label>
        <ion-reorder slot="start">ion-reorder>
      ion-item>

      <ion-item>
        <ion-label>
          Item 3 (custom ion-reorder)
        ion-label>
        <ion-reorder slot="end">
          <ion-icon name="pizza">ion-icon>
        ion-reorder>
      ion-item>

      <ion-item>
        <ion-label>
          Item 4 (custom ion-reorder slot="start")
        ion-label>
        <ion-reorder slot="start">
          <ion-icon name="pizza">ion-icon>
        ion-reorder>
      ion-item>

      <ion-reorder>
        <ion-item>
          <ion-label>
            Item 5 (the whole item can be dragged)
          ion-label>
          ion-item>
      ion-reorder>

    ion-reorder-group>
  ion-list>
ion-content>
<ion-content>
  <ion-list>
    <ion-reorder-group disabled="false">

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

      <ion-item>
        <ion-label>
          Item 2 (default ion-reorder slot="start")
        ion-label>
        <ion-reorder slot="start">ion-reorder>
      ion-item>

      <ion-item>
        <ion-label>
          Item 3 (custom ion-reorder)
        ion-label>
        <ion-reorder slot="end">
          <ion-icon name="pizza">ion-icon>
        ion-reorder>
      ion-item>

      <ion-item>
        <ion-label>
          Item 4 (custom ion-reorder slot="start")
        ion-label>
        <ion-reorder slot="start">
          <ion-icon name="pizza">ion-icon>
        ion-reorder>
      ion-item>

      <ion-reorder>
        <ion-item>
          <ion-label>
            Item 5 (the whole item can be dragged)
          ion-label>
          ion-item>
      ion-reorder>

    ion-reorder-group>
  ion-list>
ion-content>
const reorderGroup = document.querySelector('ion-reorder-group');
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
  // finishing the reorder, true means ion-reorder-group with reorder the DOM
  detail.complete(true);

  // or:
  // reorderGroup.complete(true)
});

ion-reorder-group 属性(Properties)

disabled

Description

If true, the reorder will be hidden.

Attribute disabled
Type boolean

ion-reorder-group 事件(Events)

Name Description
ionItemReorder Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array. The complete() method exposed as

ion-reorder-group 内置方法(Methods)

complete

Description

This method must be called once the ionItemReorder event is handled in order to complete the reorder operation.

Signature complete(listOrReorder?: boolean | any[] | undefined) => Promise