搜索文档 /
影子

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