跳到主要内容

标签栏 Tabbar

底部导航栏

安装使用

import { TiTabbar } from '@titian-design/mobile-react'

用法示例

基础用法

const App: React.FC = () => {
const options = [
{ icon: "home", title: "首页" },
{ icon: "arrange", title: "分类" },
];
return (
<>
<TiTabbar value={1} options={options} />
</>
)
}

设置当前选中项

const App: React.FC = () => {
const options = [
{ icon: "home", title: "首页", value: "first" },
{ icon: "arrange", title: "分类", value: "second" },
];
return (
<>
<TiTabbar value="second" options={options} />
</>
)
}

颜色设置

const App: React.FC = () => {
const options = [
{ icon: "home", title: "首页", value: "first" },
{ icon: "arrange", title: "分类", value: "second" },
];
return (
<>
<TiTabbar value="second" options={options} activeColor="#FF2E2E" color="#2A6AE9" />
</>
)
}

组合使用

const App: React.FC = () => {
return (
<>
<TiTabbar value={1}>
<TiTabbarItem icon="home" title="首页" />
<TiTabbarItem icon="arrange" title="分类" />
<TiTabbarItem icon="cart" title="购物车" />
<TiTabbarItem icon="user-account-setting" title="我的" />
</TiTabbar>
</>
)
}

图标设置

const App: React.FC = () => {
return (
<>
<TiTabbar value={1}>
<TiTabbarItem title="首页">
<TiIcon slot="active-icon" name="tabbar-home-highlight" />
<TiIcon slot="icon" name="home" />
</TiTabbarItem>
<TiTabbarItem icon="arrange" title="分类" />
<TiTabbarItem icon="cart" title="购物车" />
<TiTabbarItem icon="user-account-setting" title="我的" />
</TiTabbar>
</>
)
}

TiTabbar API

属性 Properties

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

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

类名说明备注
extClass设置容器样式-
extOptionClass设置 tabbar-item 样式-

CSS 变量 CSS Variable

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

TabbarItem API

属性 Properties

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

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

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