搜索文档 /
影子

ion-reorder

Reorder是一个组件,它允许拖动一组项目中的项目来更改其在该组中的顺序。它必须在 ion-reorder-group 提供一个可视的拖放界面。

ion-reorder 锚是否用于将项目拖放到控件内部 ion-reorder-group .看到 重新排序组 有关如何完成重新排序操作的详细信息。

使用


                <!——reorder手势在默认情况下是禁用的,允许它拖放项目——>
               
                  <
                 ion-reorder-group
                
                 禁用
                  
                  
                 
                  
                 >
               
                <!——默认重新排序图标,结束对齐的项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第一项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第二项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——默认的重新排序图标,开始对齐项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               项目3
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               第四项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                <!-自定义重新排序图标结束项目->
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第五项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               6项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——物品重新排序,整个物品可以被拖拽——>
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               项目7
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               8项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-reorder-group
                 >
复制 复制

                <!——reorder手势在默认情况下是禁用的,允许它拖放项目——>
               
                  <
                 ion-reorder-group
                
                 禁用
                  
                  
                 
                  
                 >
               
                <!——默认重新排序图标,结束对齐的项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第一项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第二项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——默认的重新排序图标,开始对齐项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               项目3
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               第四项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                <!-自定义重新排序图标结束项目->
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第五项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               6项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——物品重新排序,整个物品可以被拖拽——>
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               项目7
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               8项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-reorder-group
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               betway东盟体育appIonIcon
                
               IonItem
                
               IonLabel
                
               IonReorder
                
               IonReorderGroup
                
               IonContent
                }
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                进口
               
                
               披萨
                }
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                出口
               
                常量
               ReorderExample
                
               反应
                
                足球俱乐部
               
                
               
                
                )
               
                =>
               
                
               
                  <
                  IonContent
                 >
                
                
                /*——reorder手势默认是禁用的,允许它拖放项目——*/
                }
                
                  <
                  IonReorderGroup
                
                 禁用
                  
                  
                  
                  }
                 >
                
                
                /*——默认重排序图标,结束对齐的项目——*/
                }
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                第一项
                  
                  IonLabel
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 结束
                  
                
                 />
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                第二项
                  
                  IonLabel
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 结束
                  
                
                 />
                
                  
                  IonItem
                 >
                
                
                /*——默认的重新排序图标,开始对齐的项目——*/
                }
                
                  <
                  IonItem
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                项目3
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                第四项
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                
                /*——自定义重新排序图标结束项目——*/
                }
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                第五项
                  
                  IonLabel
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 披萨
                  }
                
                 />
                
                  
                  IonReorder
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                6项
                  
                  IonLabel
                 >
                
                  <
                  IonReorder
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 披萨
                  }
                
                 />
                
                  
                  IonReorder
                 >
                
                  
                  IonItem
                 >
                
                
                /*——项目包装在一个重新排序,整个项目可以拖动-*/
                }
                
                  <
                  IonReorder
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                项目7
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  
                  IonReorder
                 >
                
                  <
                  IonReorder
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                8项
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  
                  IonReorder
                 >
                
                  
                  IonReorderGroup
                 >
                
                  
                  IonContent
                 >
               
                )
                
复制 复制

                进口
               
                
               组件
                
               h
                }
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “reorder-example”
                
               styleUrl
                
               
                “reorder-example.css”
               
                }
                )
               
                出口
               
                
               
                ReorderExample
               
                
               
                渲染
                
                )
               
                
               
                返回
               
                
               
                //重新排序手势在默认情况下是禁用的,允许它拖放项目
               
                  <
                 ion-reorder-group
                
                 禁用
                  
                  
                  
                  }
                 >
                
                
                /*默认的重新排序图标,结束对齐项目*/
                }
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                第一项
                  
                 ion-label
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                第二项
                  
                 ion-label
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
                
                  
                 ion-item
                 >
                
                
                /*默认的重新排序图标,启动对齐的项目*/
                }
                
                  <
                 ion-item
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
                
                  <
                 ion-label
                 >
                项目3
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
                
                  <
                 ion-label
                 >
                第四项
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                
                /*自定义重新订购图标结束项目*/
                }
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                第五项
                  
                 ion-label
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-reorder
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                6项
                  
                 ion-label
                 >
                
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-reorder
                 >
                
                  
                 ion-item
                 >
                
                
                /*项目包装在一个重新排序,整个项目可以拖动*/
                }
                
                  <
                 ion-reorder
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                项目7
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  
                 ion-reorder
                 >
                
                  <
                 ion-reorder
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                8项
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  
                 ion-reorder
                 >
                
                  
                 ion-reorder-group
                 >
               
                
                
               
                }
               
                }
复制 复制

                  <
                 模板
                 >
               
                <!——reorder手势在默认情况下是禁用的,允许它拖放项目——>
               
                  <
                 ion-reorder-group
                
                 :禁用
                  
                  
                 
                  
                 >
               
                <!——默认重新排序图标,结束对齐的项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第一项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第二项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——默认的重新排序图标,开始对齐项目——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               项目3
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-reorder
                 >
               
                  <
                 ion-label
                 >
               第四项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                <!-自定义重新排序图标结束项目->
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               第五项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               6项
                  
                 ion-label
                 >
               
                  <
                 ion-reorder
                
                 
                  
                  
                 结束
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 披萨
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-item
                 >
               
                <!——物品重新排序,整个物品可以被拖拽——>
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               项目7
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  <
                 ion-reorder
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               8项
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-reorder
                 >
               
                  
                 ion-reorder-group
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 betway东盟体育appIonIcon
                  
                 IonItem
                  
                 IonLabel
                  
                 IonReorder
                  
                 IonReorderGroup
                  }
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 披萨
                  }
                 
                  
                 
                  “betway东盟体育appionicons /图标”
                  
                 
                  进口
                 
                  
                 defineComponent
                  }
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 betway东盟体育appIonIcon
                  
                 IonItem
                  
                 IonLabel
                  
                 IonReorder
                  
                 IonReorderGroup
                  }
                  
                 
                  设置
                  
                  )
                 
                  
                 
                  返回
                 
                  
                 披萨
                  }
                 
                  }
                 
                  }
                  )
                  
                 
                  
                 脚本
                 >
复制 复制

CSS阴影部分

的名字 描述
图标 重新排序句柄的图标(使用离子图标)。
查看源代码
Baidu