ion-reorder
Ionic4项目中我们可以使用Ionic4排序组件ion-reorder对项目进行布局。 ion-reorder官方文档地址:https://ionicframework.com/docs/api/reorderReorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an ion-reorder-group
to provide a visual drag and drop interface.
ion-reorder
is the anchor used to drag and drop the items inside of the ion-reorder-group
. See the
ion-reorder 用法(Usage)
<ion-item>
<ion-label>
Item 1
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 2
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 3
ion-label>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 4
ion-label>
ion-item>
<ion-item>
<ion-label>
Item 5
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 6
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 7
ion-label>
ion-item>
ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 8
ion-label>
ion-item>
ion-reorder>
<ion-item>
<ion-label>
Item 1
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 2
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 3
ion-label>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 4
ion-label>
ion-item>
<ion-item>
<ion-label>
Item 5
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 6
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 7
ion-label>
ion-item>
ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 8
ion-label>
ion-item>
ion-reorder>
import React from 'react';
import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default reorder icon, end aligned items --*/}
<IonItem>
<IonLabel>
Item 1
IonLabel>
<IonReorder slot="end">IonReorder>
IonItem>
<IonItem>
<IonLabel>
Item 2
IonLabel>
<IonReorder slot="end">IonReorder>
IonItem>
{/*-- Default reorder icon, start aligned items --*/}
<IonItem>
<IonReorder slot="start">IonReorder>
<IonLabel>
Item 3
IonLabel>
IonItem>
<IonItem>
<IonReorder slot="start">IonReorder>
<IonLabel>
Item 4
IonLabel>
IonItem>
{/*-- Custom reorder icon end items --*/}
<IonItem>
<IonLabel>
Item 5
IonLabel>
<IonReorder slot="end">
<IonIcon name="pizza">IonIcon>
IonReorder>
IonItem>
<IonItem>
<IonLabel>
Item 6
IonLabel>
<IonReorder slot="end">
<IonIcon name="pizza">IonIcon>
IonReorder>
IonItem>
{/*-- Items wrapped in a reorder, entire item can be dragged --*/}
<IonReorder>
<IonItem>
<IonLabel>
Item 7
IonLabel>
IonItem>
IonReorder>
<IonReorder>
<IonItem>
<IonLabel>
Item 8
IonLabel>
IonItem>
IonReorder>
>
);
export default Example;
<template>
<ion-item>
<ion-label>
Item 1
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 2
ion-label>
<ion-reorder slot="end">ion-reorder>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 3
ion-label>
ion-item>
<ion-item>
<ion-reorder slot="start">ion-reorder>
<ion-label>
Item 4
ion-label>
ion-item>
<ion-item>
<ion-label>
Item 5
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-item>
<ion-label>
Item 6
ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza">ion-icon>
ion-reorder>
ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 7
ion-label>
ion-item>
ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>
Item 8
ion-label>
ion-item>
ion-reorder>
template>