搜索文档 /

ion-header

Header是包含工具栏组件的父组件。需要注意的是ion-header需要是页面的三个根元素之一

使用


                  <
                 ion-header
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               小标题
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                <!- Header without a border ->
               
                  <
                 ion-header
                
                 
                  
                  
                 ion-no-border
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               页眉-无边框
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  <
                 离子含量
                 >
               
                  <
                 ion-header
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                
                 大小
                  
                  
                 
                  
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  
                 离子含量
                 >
复制 复制

                  <
                 ion-header
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               小标题
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                <!- Header without a border ->
               
                  <
                 ion-header
                
                 
                  
                  
                 ion-no-border
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               页眉-无边框
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  <
                 离子含量
                 >
               
                  <
                 ion-header
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                
                 大小
                  
                  
                 
                  
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  
                 离子含量
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonHeader
                
               IonContent
                
               IonToolbar
                
               IonButtons
                
               IonBackButton
                
               IonTitle
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                出口
               
                常量
               HeaderExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                  <
                 >
                
                  <
                  IonHeader
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonButtons
                
                 
                  
                  
                 开始
                  
                 >
                
                  <
                  IonBackButton
                
                 defaultHref
                  
                  
                 /
                  
                
                 />
                
                  
                  IonButtons
                 >
                
                  <
                  IonTitle
                 >
                我的导航栏
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                 >
                小标题
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                
                /*——没有边界的头文件——*/
                
                
                  <
                  IonHeader
                
                 类名称
                  
                  
                 ion-no-border
                  
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                 >
                页眉-无边框
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonContent
                 >
                
                  <
                  IonHeader
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                
                 大小
                  
                  
                 
                  
                 >
                我的导航栏
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  
                  IonContent
                 >
                
                  
                 >
               
                
                
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “header-example”
                
               styleUrl
                
               
                “header-example.css”
               
                
                
               
                出口
               
                
               
                HeaderExample
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 ion-header
                 >
                
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
                
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
                
                  
                 ion-buttons
                 >
                
                  <
                 ion-title
                 >
                我的导航栏
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
                
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-title
                 >
                小标题
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
                
                  
                 ion-header
                 >
                
               
                //没有边界的头文件
               
                  <
                 ion-header
                
                 
                  
                  
                 ion-no-border
                  
                 >
                
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-title
                 >
                页眉-无边框
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
                
                  
                 ion-header
                 >
                
               
                  <
                 离子含量
                 >
                
                  <
                 ion-header
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
                
                  <
                 ion-toolbar
                 >
                
                  <
                 ion-title
                
                 大小
                  
                  
                 
                  
                 >
                我的导航栏
                  
                 ion-title
                 >
                
                  
                 ion-toolbar
                 >
                
                  
                 ion-header
                 >
                
                  
                 离子含量
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-header
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-buttons
                
                 
                  
                  
                 开始
                  
                 >
               
                  <
                 ion-back-button
                 >
                  
                 ion-back-button
                 >
               
                  
                 ion-buttons
                 >
               
                  <
                 ion-title
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               小标题
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                <!- Header without a border ->
               
                  <
                 ion-header
                
                 
                  
                  
                 ion-no-border
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                 >
               页眉-无边框
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  <
                 离子含量
                 >
               
                  <
                 ion-header
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
               
                  <
                 ion-toolbar
                 >
               
                  <
                 ion-title
                
                 大小
                  
                  
                 
                  
                 >
               我的导航栏
                  
                 ion-title
                 >
               
                  
                 ion-toolbar
                 >
               
                  
                 ion-header
                 >
               
                  
                 离子含量
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonBackButton
                  
                 IonButtons
                  
                 IonContent
                  
                 IonHeader
                  
                 IonTitle
                  
                 IonToolbar
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonBackButton
                  
                 IonButtons
                  
                 IonContent
                  
                 IonHeader
                  
                 IonTitle
                  
                 IonToolbar
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

崩溃

描述

描述将应用于标题的滚动效果浓缩仅适用于iOS模式。

通常用于可折叠的大标题

属性 崩溃
类型 “浓缩”|定义

模式

描述

模式决定使用哪种平台样式。

属性 模式
类型 “ios”|“医学博士”

半透明的

描述

如果真正的,标题将是半透明的。仅当模式为时适用“苹果”设备支持backdrop-filter

注意:为了滚动页眉后面的内容,全屏属性需要设置在内容上。

属性 半透明的
类型 布尔
默认的
Baidu