:: BASE_DOC ::
API
TabBar Props
| name |
type |
default |
description |
required |
| custom-style |
Object |
- |
CSS(Cascading Style Sheets) |
N |
| bordered |
Boolean |
true |
- |
N |
| fixed |
Boolean |
true |
- |
N |
| placeholder |
Boolean |
false |
- |
N |
| safe-area-inset-bottom |
Boolean |
true |
- |
N |
| shape |
String |
normal |
options: normal/round |
N |
| split |
Boolean |
true |
- |
N |
| theme |
String |
normal |
options: normal/tag |
N |
| value |
String / Number / Array |
- |
v-model:value is supported。Typescript: string | number | Array<string | number> |
N |
| default-value |
String / Number / Array |
- |
uncontrolled property。Typescript: string | number | Array<string | number> |
N |
| z-index |
Number |
1 |
- |
N |
TabBar External Classes
| className |
Description |
| t-class |
- |
TabBarItem Props
| name |
type |
default |
description |
required |
| custom-style |
Object |
- |
CSS(Cascading Style Sheets) |
N |
| badge-props |
Object |
{} |
Typescript: BadgeProps，Badge API Documents。see more ts definition |
N |
| icon |
String / Object |
- |
- |
N |
| sub-tab-bar |
Array |
- |
Typescript: SubTabBarItem[] interface SubTabBarItem { value: string; label: string }。see more ts definition |
N |
| value |
String / Number |
- |
- |
N |
TabBarItem Slots
CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
| Name |
Default Value |
Description |
| --td-tab-bar-bg-color |
@bg-color-container |
- |
| --td-tab-bar-border-color |
@border-level-1-color |
- |
| --td-tab-bar-round-shadow |
@shadow-3 |
- |
| --td-tab-bar-active-bg |
@brand-color-light |
- |
| --td-tab-bar-active-color |
@brand-color |
- |
| --td-tab-bar-color |
@text-color-primary |
- |
| --td-tab-bar-height |
80rpx |
- |
| --td-tab-bar-hover-bg-color |
rgba(0, 0, 0, 0.05) |
- |
| --td-tab-bar-spread-border-color |
@border-color |
- |
| --td-tab-bar-spread-shadow |
@shadow-3 |
- |
