:: BASE_DOC ::
API
Tabs Props
| name |
type |
default |
description |
required |
| style |
Object |
- |
CSS(Cascading Style Sheets) |
N |
| custom-style |
Object |
- |
CSS(Cascading Style Sheets)，used to set style on virtual component |
N |
| animation |
Object |
- |
Typescript：TabAnimation type TabAnimation = { duration: number } & Record<string, any>。see more ts definition |
N |
| middle |
Slot |
- |
see more ts definition |
N |
| show-bottom-line |
Boolean |
true |
- |
N |
| space-evenly |
Boolean |
true |
- |
N |
| split |
Boolean |
true |
- |
N |
| sticky |
Boolean |
false |
- |
N |
| sticky-props |
Object |
- |
Typescript：StickyProps，Sticky API Documents。see more ts definition |
N |
| swipeable |
Boolean |
true |
- |
N |
| theme |
String |
line |
options: line/tag/card |
N |
| value |
String / Number |
- |
Typescript：TabValue type TabValue = string | number。see more ts definition |
N |
| default-value |
String / Number |
undefined |
uncontrolled property。Typescript：TabValue type TabValue = string | number。see more ts definition |
N |
Tabs Events
| name |
params |
description |
| change |
(value: TabValue, label: string) |
- |
| click |
(value: TabValue, label: string) |
- |
| scroll |
(scrollTop: number, isFixed: boolean) |
- |
Tabs External Classes
| className |
Description |
| t-class |
- |
| t-class-active |
- |
| t-class-content |
- |
| t-class-item |
- |
| t-class-track |
- |
TabPanel Props
| name |
type |
default |
description |
required |
| style |
Object |
- |
CSS(Cascading Style Sheets) |
N |
| custom-style |
Object |
- |
CSS(Cascading Style Sheets)，used to set style on virtual component |
N |
| badge-props |
Object |
- |
- |
N |
| disabled |
Boolean |
false |
- |
N |
| icon |
String / Object |
- |
- |
N |
| label |
String |
- |
- |
N |
| panel |
String / Slot |
- |
see more ts definition |
N |
| value |
String / Number |
- |
Typescript：TabValue，Tabs API Documents。see more ts definition |
N |
CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
| Name |
Default Value |
Description |
| --td-tab-border-color |
@component-stroke |
- |
| --td-tab-font-size |
28rpx |
- |
| --td-tab-icon-size |
36rpx |
- |
| --td-tab-item-active-color |
@brand-color |
- |
| --td-tab-item-color |
@font-gray-1 |
- |
| --td-tab-item-disabled-color |
@font-gray-4 |
- |
| --td-tab-item-height |
96rpx |
- |
| --td-tab-item-tag-active-bg |
@brand-color-light |
- |
| --td-tab-item-tag-bg |
@bg-color-secondarycontainer |
- |
| --td-tab-item-tag-height |
64rpx |
- |
| --td-tab-item-vertical-height |
108rpx |
- |
| --td-tab-item-vertical-width |
208rpx |
- |
| --td-tab-nav-bg-color |
@bg-color-container |
- |
| --td-tab-track-color |
@brand-color |
- |
| --td-tab-track-radius |
8rpx |
- |
| --td-tab-track-thickness |
6rpx |
- |
| --td-tab-track-width |
32rpx |
- |
