zent-tabs

tabs组件

使用场景或者特殊 API 设计讲解

API

Tabs接收参数

| 参数 | 说明 | 类型 | 默认值 | 备选值 | 是否必须 | |------|------|------|--------|--------|--------| | className | 自定义额外类名 | string | '' | '' | 否 | | prefix | 自定义前缀 | string | 'zent' | null | 否 | | type | tabs组件类型 | oneOf(['normal', 'card', 'slider']) | normal | ['card', 'slider'] | 否 | | activeId | 激活的tab-id | string | null | null | 是 | | size | tabs的尺寸类型 | oneOf(['huge', 'normal']) | normal | huge | 否 | | align | tabs的布局类型 | oneOf(['left', 'right', 'center']) | left | right, center | 否 | | onTabChange | 选中的tab改变时 | func: id => void | null | null | 否 | | onTabDel | 关闭tab时 | func: id => void | null | null | 否 | | onTabAdd | 点击增加tab时 | func: void => void | null | null | 否 | | candel | 是否可删除 | bool | false | true | 否 | | canadd | 是否可增加tab | bool | false | true | 否 |

TabPanel参数介绍

| 参数 | 说明 | 类型 | 默认值 | 备选值 | 是否必须 | |------|------|------|--------|--------|--------| | tab | 该TabPanel所对应的tab标签的名字 | string | null | null | 是 | | id | 该TabPanel的id | string | null | null | 是 |

例子

import Tabs from 'zent-tabs';
const { TabPanel } = Tabs;
<Tabs
  align='left'
  size='normal'
  type='normal'
  candel=false
  canadd=true
  activeId='2'
>
  <TabPanel id='2' tab='选项一'>content</TabPanel>
  <TabPanel id='3' tab='选项二'>content</TabPanel>
</Tabs>

如何安装

npm install zent-tabs --save

使用webpack打包的项目：

import Tabs from 'zent-tabs';

使用requirejs打包的项目：

var ZentTabs = require('zent-tabs/dist/main');