ion-tab-bar
使用
<
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 |
类型 |
字符串|未定义 |
半透明的 |
|
描述 |
如果 |
属性 |
半透明的 |
类型 |
布尔 |
默认的 |
假 |
CSS自定义属性
的名字 | 描述 |
---|---|
——背景 |
标签栏的背景 |
——边境 |
标签栏的边框 |
——颜色 |
标签栏的颜色 |