zent
Version:
一套前端设计语言和基于React的实现
47 lines (37 loc) • 1.86 kB
Markdown
---
title: Tabs
path: component/tabs
group: Navigation
---
Tabs is used to switch different view in one page.
| Property | Description | Type | Default | Alternative | Required |
| ---------| --------- | -------- | ----- | --------- | ---- |
| activeId | The id of the active tab | string | | | yes |
| type | The type of tabs | string | `'normal'` | `'card'`, `'slider'` | no |
| size | The size of tabs | string | `'normal'` | `'huge'` | no |
| align | The layout of tabs | string | `'left'` | `'right'`, `'center'` | no |
| onTabChange | The callback function that is triggered when the tab is active | func(id) | | | no |
| onTabDel | The callback function that is triggered when the tab is closed. | func(id) | | | no |
| onTabAdd | The callback function that is triggered when adding tab. | func | | | no |
| candel | Whether the tab can be deleted. | bool | `false` | `true` | no |
| canadd | Whether the tabs can add more tab pannels. | bool | `false` | `true` | no |
| tabs | The config of tabs when not using Panel. | Array | `null` | | no |
| className | The custom classname | string | `''` | | no |
| prefix | The custom prefix | string | `'zent'` | | no |
Paramerter type of `tabs`：
```ts
Array<{
key: string | number, // the same as TabPanel's `id`
title: string | number, // the same as TabPanel's `tab`
disabled?: boolean // the same as TabPanel's `disabled`
}>
```
| Property | Description | Type | Required |
| --- | --------------------- | ------ | ---- |
| tab | The label of the tab which corresponding to this panel. | string | yes |
| id | The id of the tab panel. | string | yes |
| disabled | Disable this tab panel. | bool | no |