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阴影部分
的名字 | 描述 |
---|---|
图标 |
重新排序句柄的图标(使用离子图标)。 |