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');