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 |
内部列表头边框的宽度 |