ion-item-divider
项目分隔符是可用于分隔列表中的项目的块元素。它们类似于列表标题,但不是放在列表的顶部,而是应该放在项目组之间。
使用
<
ion-item-divider
>
<
ion-label
>
基本项分频器
ion-label
>
ion-item-divider
>
<
ion-item-divider
颜色
=
"
二次
"
>
<
ion-label
>
二次项分频器
ion-label
>
ion-item-divider
>
<!——列表中的项目分隔符——>
<
ion-list
>
<
ion-item-divider
>
<
ion-label
>
一个节
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
A1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A5
ion-label
>
ion-item
>
<
ion-item-divider
>
<
ion-label
>
部分B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
B1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B5
ion-label
>
ion-item
>
ion-list
>
复制
复制
<
ion-item-divider
>
<
ion-label
>
基本项分频器
ion-label
>
ion-item-divider
>
<
ion-item-divider
颜色
=
"
二次
"
>
<
ion-label
>
二次项分频器
ion-label
>
ion-item-divider
>
<!——列表中的项目分隔符——>
<
ion-list
>
<
ion-item-divider
>
<
ion-label
>
一个节
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
A1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A5
ion-label
>
ion-item
>
<
ion-item-divider
>
<
ion-label
>
部分B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
B1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B5
ion-label
>
ion-item
>
ion-list
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonItemDivider
,
IonLabel
,
IonList
,
IonItem
,
IonContent
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
ItemDividerExample
:
反应
.
足球俱乐部
=
(
)
=>
(
<
IonContent
>
<
IonItemDivider
>
<
IonLabel
>
基本项分频器
IonLabel
>
IonItemDivider
>
<
IonItemDivider
颜色
=
"
二次
"
>
<
IonLabel
>
二次项分频器
IonLabel
>
IonItemDivider
>
{
/*——List中的项目分隔符——*/
}
<
IonList
>
<
IonItemDivider
>
<
IonLabel
>
一个节
IonLabel
>
IonItemDivider
>
<
IonItem
>
<
IonLabel
>
A1
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
A2
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
A3
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
A4
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
A5
IonLabel
>
IonItem
>
<
IonItemDivider
>
<
IonLabel
>
部分B
IonLabel
>
IonItemDivider
>
<
IonItem
>
<
IonLabel
>
B1
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
B2
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
B3
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
B4
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
>
B5
IonLabel
>
IonItem
>
IonList
>
IonContent
>
)
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“item-divider-example”
,
styleUrl
:
“item-divider-example.css”
}
)
出口
类
ItemDividerExample
{
渲染
(
)
{
返回
[
<
ion-item-divider
>
<
ion-label
>
基本项分频器
ion-label
>
ion-item-divider
>
,
<
ion-item-divider
颜色
=
"
二次
"
>
<
ion-label
>
二次项分频器
ion-label
>
ion-item-divider
>
,
//列表中的项目分隔符
<
ion-list
>
<
ion-item-divider
>
<
ion-label
>
一个节
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
A1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A5
ion-label
>
ion-item
>
<
ion-item-divider
>
<
ion-label
>
部分B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
B1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B5
ion-label
>
ion-item
>
ion-list
>
]
;
}
}
复制
复制
<
模板
>
<
ion-item-divider
>
<
ion-label
>
基本项分频器
ion-label
>
ion-item-divider
>
<
ion-item-divider
颜色
=
"
二次
"
>
<
ion-label
>
二次项分频器
ion-label
>
ion-item-divider
>
<!——列表中的项目分隔符——>
<
ion-list
>
<
ion-item-divider
>
<
ion-label
>
一个节
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
A1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
A5
ion-label
>
ion-item
>
<
ion-item-divider
>
<
ion-label
>
部分B
ion-label
>
ion-item-divider
>
<
ion-item
>
<
ion-label
>
B1
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B2
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B3
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B4
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
>
B5
ion-label
>
ion-item
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
,
IonItemDivider
,
IonLabel
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonItem
,
IonItemDivider
,
IonLabel
}
}
)
;
脚本
>
复制
复制
属性
颜色 |
|
---|---|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
黏糊糊的 |
|
描述 | |
类型 |
布尔 |
默认的 |
假 |
CSS自定义属性
的名字 | 描述 |
---|---|
——背景 |
项目分隔符的背景 |
——颜色 |
物品分配器的颜色 |
——inner-padding-bottom |
项目分隔符的底部内填充 |
——inner-padding-end |
结束项目分隔符的内部填充 |
——inner-padding-start |
开始项目分隔符的内部填充 |
——inner-padding-top |
项目分隔符的顶部内填充 |
——padding-bottom |
项目分隔符的底部填充 |
——padding-end |
如果方向是从左到右,则为右填充;如果方向是从右到左,则为左填充 |
——padding-start |
如果方向是从左到右,则为左填充;如果方向是从右到左,则为右填充 |
——padding-top |
项分隔符的顶部填充 |
槽
的名字 | 描述 |
---|---|
如果没有提供槽,则将内容放在指定槽之间。 | |
“结束” |
内容在LTR中放在分隔符文本的右边,在RTL中放在左边。 |
“开始” |
在LTR中,内容放在分隔符文本的左边,在RTL中放在右边。 |