ion-item-group
项组是将类似项组织在一起的容器。它们可以包含项分隔符,将项划分为多个部分。它们还可以用来对滑动的物品进行分组。
使用
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
一个
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
安哥拉
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
阿根廷
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
亚美尼亚
ion-label
>
ion-item
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
孟加拉国
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
白俄罗斯
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
比利时
ion-label
>
ion-item
>
ion-item-group
>
<!—它们也可以用来分组滑动的项目—>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
水果
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
葡萄
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
苹果
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
蔬菜
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
胡萝卜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
芹菜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
复制
复制
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
一个
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
安哥拉
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
阿根廷
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
亚美尼亚
ion-label
>
ion-item
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
孟加拉国
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
白俄罗斯
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
比利时
ion-label
>
ion-item
>
ion-item-group
>
<!—它们也可以用来分组滑动的项目—>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
水果
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
葡萄
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
苹果
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
蔬菜
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
胡萝卜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
芹菜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonItemGroup
,
IonItemDivider
,
IonLabel
,
IonItem
,
IonItemSliding
,
IonItemOptions
,
IonItemOption
}
从
“@betway东盟体育appionic /反应”
;
常量
例子
:
反应
.
足球俱乐部
<
{
}
>
=
(
)
=>
(
<
>
<
IonItemGroup
>
<
IonItemDivider
>
<
IonLabel
>
一个
IonLabel
>
IonItemDivider
>
<
IonItem
>
<
IonLabel
>
安哥拉
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
阿根廷
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
亚美尼亚
IonLabel
>
IonItem
>
IonItemGroup
>
<
IonItemGroup
>
<
IonItemDivider
>
<
IonLabel
>
B
IonLabel
>
IonItemDivider
>
<
IonItem
>
<
IonLabel
>
孟加拉国
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
白俄罗斯
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
比利时
IonLabel
>
IonItem
>
IonItemGroup
>
{
/*——它们也可以用于对滑动项进行分组——*/
}
<
IonItemGroup
>
<
IonItemDivider
>
<
IonLabel
>
水果
IonLabel
>
IonItemDivider
>
<
IonItemSliding
>
<
IonItem
>
<
IonLabel
>
<
h3
>
葡萄
h3
>
IonLabel
>
IonItem
>
<
IonItemOptions
>
<
IonItemOption
>
最喜欢的
IonItemOption
>
IonItemOptions
>
IonItemSliding
>
<
IonItemSliding
>
<
IonItem
>
<
IonLabel
>
<
h3
>
苹果
h3
>
IonLabel
>
IonItem
>
<
IonItemOptions
>
<
IonItemOption
>
最喜欢的
IonItemOption
>
IonItemOptions
>
IonItemSliding
>
IonItemGroup
>
<
IonItemGroup
>
<
IonItemDivider
>
<
IonLabel
>
蔬菜
IonLabel
>
IonItemDivider
>
<
IonItemSliding
>
<
IonItem
>
<
IonLabel
>
<
h3
>
胡萝卜
h3
>
IonLabel
>
IonItem
>
<
IonItemOptions
>
<
IonItemOption
>
最喜欢的
IonItemOption
>
IonItemOptions
>
IonItemSliding
>
<
IonItemSliding
>
<
IonItem
>
<
IonLabel
>
<
h3
>
芹菜
h3
>
IonLabel
>
IonItem
>
<
IonItemOptions
>
<
IonItemOption
>
最喜欢的
IonItemOption
>
IonItemOptions
>
IonItemSliding
>
IonItemGroup
>
>
)
;
出口
默认的
例子
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“item-group-example”
,
styleUrl
:
“item-group-example.css”
}
)
出口
类
ItemGroupExample
{
渲染
(
)
{
返回
[
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
一个
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
安哥拉
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
阿根廷
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
亚美尼亚
ion-label
>
ion-item
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
孟加拉国
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
白俄罗斯
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
比利时
ion-label
>
ion-item
>
ion-item-group
>
//它们还可以用于对滑动项进行分组
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
水果
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
葡萄
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
苹果
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
蔬菜
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
胡萝卜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
芹菜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
]
;
}
}
复制
复制
<
模板
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
一个
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
安哥拉
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
阿根廷
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
亚美尼亚
ion-label
>
ion-item
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
孟加拉国
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
白俄罗斯
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
比利时
ion-label
>
ion-item
>
ion-item-group
>
<!—它们也可以用来分组滑动的项目—>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
水果
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
葡萄
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
苹果
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
<
ion-item-group
>
<
ion-item-divider
>
<
ion-label
>
蔬菜
ion-label
>
ion-item-divider
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
胡萝卜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
<
ion-item-sliding
>
<
ion-item
>
<
ion-label
>
<
h3
>
芹菜
h3
>
ion-label
>
ion-item
>
<
ion-item-options
>
<
ion-item-option
>
最喜欢的
ion-item-option
>
ion-item-options
>
ion-item-sliding
>
ion-item-group
>
模板
>
<
脚本
>
进口
{
IonItem
,
IonItemDivider
,
IonItemGroup
,
IonItemOption
,
IonItemOptions
,
IonItemSliding
,
IonLabel
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonItem
,
IonItemDivider
,
IonItemGroup
,
IonItemOption
,
IonItemOptions
,
IonItemSliding
,
IonLabel
}
}
)
;
脚本
>
复制
复制