跳到主要内容

标签栏 Tabbar

底部导航栏

用法示例

基础用法

<ti-tabbar id="ti-tabbar"></ti-tabbar>

当前选中项

<ti-tabbar id="ti-tabbar" value="second"></ti-tabbar>

颜色

<ti-tabbar id="ti-tabbar" value="second" active-color="#FF2E2E" color="#2A6AE9"></ti-tabbar>

组合使用

<ti-tabbar value="1">
<ti-tabbar-item icon="home" title="首页"></ti-tabbar-item>
<ti-tabbar-item icon="arrange" title="分类"></ti-tabbar-item>
<ti-tabbar-item icon="cart" title="购物车"></ti-tabbar-item>
<ti-tabbar-item icon="user-account-setting" title="我的"></ti-tabbar-item>
</ti-tabbar>

图标设置

<ti-tabbar value="1">
<ti-tabbar-item title="首页">
<ti-icon slot="active-icon" name="tabbar-home-highlight"></ti-icon>
<ti-icon slot="icon" name="home"></ti-icon>
</ti-tabbar-item>
<ti-tabbar-item icon="arrange" title="分类"></ti-tabbar-item>
<ti-tabbar-item icon="cart" title="购物车"></ti-tabbar-item>
<ti-tabbar-item icon="user-account-setting" title="我的"></ti-tabbar-item>
</ti-tabbar>

ti-tabbar API

属性 Properties

名称类型必填默认值说明备注
valuestring | numbernull选中值(匹配 tabbar-item 的 value,若 tabbar-item的value 没有值,则匹配对应下标)-
placeholderbooleantrue是否占据高度-
separationborder | shadow | ''-分离内容区样式-
optionsArray<Option>-Option类型TabbarItem 组件 Properties 一致-
safe-areabooleantrue全面屏是否设置安全距离-
active-colorstring-选中颜色
colorstring-默认选中
icon-sizenumber0字体图标大小
title-sizenumber0文字大小
ext-stylestring-容器样式
ext-option-stylestring-子项容器样式

事件 Events

名称参数列表描述备注
select(e: CustomEvent<string \| number>) => voidtabbar选中项,返回值为TabbarItem中value的值,没有value字段,返回索引-

插槽 Slots

名称说明备注
defaulttabbar-item 组件-

外部样式类 External Classes

类名说明备注
ext-class设置容器样式-
ext-option-class设置 tabbar-item 样式-

CSS 变量 CSS Variable

变量默认值说明备注
--tabbar-padding-v10rpx内容区垂直方向的内边距-
--tabbar-padding-h0rpx内容区水平方向的内边距-
--tabbar-shadow-bglinear-gradient(180deg, rgba(33, 33, 33, 0%) 0%, #212121 100%)内容区投影区背景-
--tabbar-shadow-height20rpx内容区投影区高度-
--tabbar-border-top1rpx solid #f2f2f2内容区边线上方边线样式-
--tabbar-title-margin-top4rpx文字距离顶部外边距,同 tabbar-item --tabbar-item-title-margin-top-
--tabbar-title-margin-bottom12rpx文字距离底部外边距,同 tabbar-item --tabbar-item-title-margin-bottom-
--tabbar-title-margin-h12rpx文字水平方向外边距,同 tabbar-item --tabbar-item-title-margin-h-

TabbarItem API

属性 Properties

名称类型必填默认值说明备注
valuestring-匹配父类 value,当做onSelect返回值
iconstring-字体图标
titlestring-标题文字
active-colorstring#FF2E2E选中颜色
colorstring#757575默认颜色
icon-sizenumber48字体图标大小
title-sizenumber20文字大小
ext-stylestring-容器样式

事件 Events

名称参数列表描述备注
onclick(e: Event) => voidtabbar 点击项-

插槽 Slots

名称说明备注
active-icon选中 icon-
icon默认 icon-
active-title选中标题-
title默认标题-

外部样式类 External Classes

类名说明备注
ext-class设置容器样式-

CSS 变量 CSS Variable

变量默认值说明备注
--tabbar-background#fff背景颜色----
--tabbar-item-title-margin-top4rpx文字距离顶部外边距-
--tabbar-item-title-margin-bottom12rpx文字距离底部外边距-
--tabbar-item-title-margin-h12rpx文字水平方向外边距-