ion-list-header
ListHeader是列表的头组件。与ItemDivider不同,ListHeaders被设计成与其他列表项不同的样式。
使用
<!——默认列表头——>
<
ion-list-header
>
<
ion-label
>
列表标题
ion-label
>
ion-list-header
>
<!——List Header with Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——List Header with Outline Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
填满
=
"
大纲
"
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头全行——>
<
ion-list-header
行
=
"
完整的
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头插入行——>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表中的列表头——>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
最近
ion-label
>
<
ion-button
>
清晰的
ion-button
>
ion-list-header
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
我拥有你,宝贝
h1
>
ion-label
>
ion-item
>
ion-list
>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
趋势
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
哈利风格
h1
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
圣诞节
h1
>
ion-label
>
ion-item
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
下降
h1
>
ion-label
>
ion-item
>
ion-list
>
复制
复制
<!——默认列表头——>
<
ion-list-header
>
<
ion-label
>
列表标题
ion-label
>
ion-list-header
>
<!——List Header with Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——List Header with Outline Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
填满
=
"
大纲
"
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头全行——>
<
ion-list-header
行
=
"
完整的
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头插入行——>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表中的列表头——>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
最近
ion-label
>
<
ion-button
>
清晰的
ion-button
>
ion-list-header
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
我拥有你,宝贝
h1
>
ion-label
>
ion-item
>
ion-list
>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
趋势
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
哈利风格
h1
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
圣诞节
h1
>
ion-label
>
ion-item
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
下降
h1
>
ion-label
>
ion-item
>
ion-list
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonButton
,
IonContent
,
IonItem
,
IonLabel
,
IonList
,
IonListHeader
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
ListHeaderExample
:
反应
.
足球俱乐部
=
(
)
=>
(
<
IonContent
>
{
/*——默认列表头——*/
}
<
IonListHeader
>
<
IonLabel
>
列表标题
IonLabel
>
IonListHeader
>
{
/*——List Header with Button——*/
}
<
IonListHeader
>
<
IonLabel
>
本周的新
IonLabel
>
<
IonButton
>
看到所有
IonButton
>
IonListHeader
>
{
/*——List Header with Outline Button——*/
}
<
IonListHeader
>
<
IonLabel
>
本周的新
IonLabel
>
<
IonButton
填满
=
"
大纲
"
>
看到所有
IonButton
>
IonListHeader
>
{
/*——List Header Full Lines——*/
}
<
IonListHeader
行
=
"
完整的
"
>
<
IonLabel
>
本周的新
IonLabel
>
<
IonButton
>
看到所有
IonButton
>
IonListHeader
>
{
/*——列表头插入行——*/
}
<
IonListHeader
行
=
"
插图
"
>
<
IonLabel
>
本周的新
IonLabel
>
<
IonButton
>
看到所有
IonButton
>
IonListHeader
>
{
/*——List中的头文件——*/
}
<
IonList
>
<
IonListHeader
行
=
"
插图
"
>
<
IonLabel
>
最近
IonLabel
>
<
IonButton
>
清晰的
IonButton
>
IonListHeader
>
<
IonItem
行
=
"
没有一个
"
>
<
IonLabel
颜色
=
"
主
"
>
<
h1
>
我拥有你,宝贝
h1
>
IonLabel
>
IonItem
>
IonList
>
<
IonList
>
<
IonListHeader
行
=
"
插图
"
>
<
IonLabel
>
趋势
IonLabel
>
IonListHeader
>
<
IonItem
>
<
IonLabel
颜色
=
"
主
"
>
<
h1
>
哈利风格
h1
>
IonLabel
>
IonItem
>
<
IonItem
>
<
IonLabel
颜色
=
"
主
"
>
<
h1
>
圣诞节
h1
>
IonLabel
>
IonItem
>
<
IonItem
行
=
"
没有一个
"
>
<
IonLabel
颜色
=
"
主
"
>
<
h1
>
下降
h1
>
IonLabel
>
IonItem
>
IonList
>
IonContent
>
)
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“list-header-example”
,
styleUrl
:
“list-header-example.css”
}
)
出口
类
ListHeaderExample
{
渲染
(
)
{
返回
[
//默认列表头
<
ion-list-header
>
<
ion-label
>
列表标题
ion-label
>
ion-list-header
>
,
//列表头与按钮
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
,
//列表头与大纲按钮
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
填满
=
"
大纲
"
>
看到所有
ion-button
>
ion-list-header
>
,
//列表头全行
<
ion-list-header
行
=
"
完整的
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
,
//列表头插入行
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
,
//列表头文件
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
最近
ion-label
>
<
ion-button
>
清晰的
ion-button
>
ion-list-header
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
我拥有你,宝贝
h1
>
ion-label
>
ion-item
>
ion-list
>
,
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
趋势
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
哈利风格
h1
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
圣诞节
h1
>
ion-label
>
ion-item
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
下降
h1
>
ion-label
>
ion-item
>
ion-list
>
]
;
}
}
复制
复制
<
模板
>
<!——默认列表头——>
<
ion-list-header
>
<
ion-label
>
列表标题
ion-label
>
ion-list-header
>
<!——List Header with Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——List Header with Outline Button——>
<
ion-list-header
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
填满
=
"
大纲
"
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头全行——>
<
ion-list-header
行
=
"
完整的
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表头插入行——>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
本周的新
ion-label
>
<
ion-button
>
看到所有
ion-button
>
ion-list-header
>
<!——列表中的列表头——>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
最近
ion-label
>
<
ion-button
>
清晰的
ion-button
>
ion-list-header
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
我拥有你,宝贝
h1
>
ion-label
>
ion-item
>
ion-list
>
<
ion-list
>
<
ion-list-header
行
=
"
插图
"
>
<
ion-label
>
趋势
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
哈利风格
h1
>
ion-label
>
ion-item
>
<
ion-item
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
圣诞节
h1
>
ion-label
>
ion-item
>
<
ion-item
行
=
"
没有一个
"
>
<
ion-label
颜色
=
"
主
"
>
<
h1
>
下降
h1
>
ion-label
>
ion-item
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
,
IonLabel
,
IonList
,
IonListHeader
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonItem
,
IonLabel
,
IonList
,
IonListHeader
}
}
)
;
脚本
>
复制
复制
属性
颜色 |
|
---|---|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
行 |
|
描述 |
如何在列表头中显示底部边框。 |
属性 |
行 |
类型 |
"full" | "inset" | "none" |未定义 |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
CSS自定义属性
的名字 | 描述 |
---|---|
——背景 |
列表头的背景 |
——边框颜色 |
列表页眉边框的颜色 |
——边框样式 |
列表头边框的样式 |
——边框宽度 |
列表页眉边框的宽度 |
——颜色 |
列表标题文本的颜色 |
——inner-border-width |
内部列表头边框的宽度 |