搜索文档 /
影子

ion-tab-bar

选项卡栏是一个UI组件,它包含一组 选项卡按钮 .的内部必须提供一个标签栏 选项卡 与每个人沟通 选项卡

使用


                  <
                 ion-tabs
                 >
               
                <!——标签栏——>
               
                  <
                 ion-tab-bar
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 账户
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 联系
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 调用
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 设置
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 设置
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 ion-tab-bar
                 >
               
                  
                 ion-tabs
                 >
复制 复制

                  <
                 ion-tabs
                 >
               
                <!——标签视图——>
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 账户
                  
                 >
                  
                 ion-tab
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 联系
                  
                 >
                  
                 ion-tab
                 >
               
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 设置
                  
                 >
                  
                 ion-tab
                 >
               
                <!——标签栏——>
               
                  <
                 ion-tab-bar
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 账户
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 联系
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 调用
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 设置
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 设置
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 ion-tab-bar
                 >
               
                  
                 ion-tabs
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonTabs
                
               IonTabBar
                
               IonTabButton
                
               betway东盟体育appIonIcon
                
               IonContent
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                进口
               
                
               调用
                
               
                
               设置
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                出口
               
                常量
               TabBarExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                  <
                  IonContent
                 >
                
                  <
                  IonTabs
                 >
                
                
                /*——Tab栏——*/
                
                
                  <
                  IonTabBar
                
                 
                  
                  
                 
                  
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 账户
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 
                  
                
                 />
                
                  
                  IonTabButton
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 联系
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 调用
                  
                
                 />
                
                  
                  IonTabButton
                 >
                
                  <
                  IonTabButton
                
                 选项卡
                  
                  
                 设置
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 设置
                  
                
                 />
                
                  
                  IonTabButton
                 >
                
                  
                  IonTabBar
                 >
                
                  
                  IonTabs
                 >
                
                  
                  IonContent
                 >
               
                
                
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “tab-bar-example”
                
               styleUrl
                
               
                “tab-bar-example.css”
               
                
                
               
                出口
               
                
               
                TabBarExample
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 ion-tabs
                 >
                
                
                /*标签视图*/
                
                
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 账户
                  
                
                 组件
                  
                  
                 page-account
                  
                 >
                  
                 ion-tab
                 >
                
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 联系
                  
                
                 组件
                  
                  
                 page-contact
                  
                 >
                  
                 ion-tab
                 >
                
                  <
                 ion-tab
                
                 选项卡
                  
                  
                 设置
                  
                
                 组件
                  
                  
                 页的设置
                  
                 >
                  
                 ion-tab
                 >
                
                
                /*标签栏*/
                
                
                  <
                 ion-tab-bar
                
                 
                  
                  
                 
                  
                 >
                
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 账户
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-tab-button
                 >
                
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 联系
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 调用
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-tab-button
                 >
                
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 设置
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 设置
                  
                 >
                  
                 ion-icon
                 >
                
                  
                 ion-tab-button
                 >
                
                  
                 ion-tab-bar
                 >
                
                  
                 ion-tabs
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-tabs
                 >
               
                <!——标签栏——>
               
                  <
                 ion-tab-bar
                
                 
                  
                  
                 
                  
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 账户
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 联系
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 调用
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  <
                 ion-tab-button
                
                 选项卡
                  
                  
                 设置
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 设置
                  
                 >
                  
                 ion-icon
                 >
               
                  
                 ion-tab-button
                 >
               
                  
                 ion-tab-bar
                 >
               
                  
                 ion-tabs
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 betway东盟体育appIonIcon
                  
                 IonTabBar
                  
                 IonTabButton
                  
                 IonTabs
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 调用
                  
                 
                  
                 设置
                  
                 
                  
                 
                  “betway东盟体育appionicons /图标”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 betway东盟体育appIonIcon
                  
                 IonTabBar
                  
                 IonTabButton
                  
                 IonTabs
                  
                  
                 
                  设置
                  
                  
                 
                  
                 
                  返回
                 
                  
                 调用
                  
                 
                  
                 设置
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

颜色

描述

应用程序调色板中要使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

模式

描述

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

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

selectedTab

描述

选中的选项卡组件

属性 selected-tab
类型 字符串|未定义

半透明的

描述

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

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

CSS自定义属性

的名字 描述
——背景 标签栏的背景
——边境 标签栏的边框
——颜色 标签栏的颜色
Baidu