uxcore-tabs

uxcore-tabs

--

TL;DR

tab ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-tabs
$ cd uxcore-tabs
$ npm install
$ gulp server

Usage

var Tabs = require('uxcore-tabs');
var TabPane = Tabs.TabPane;

var callback = function(key){
}

React.render(
  (
    <Tabs defaultActiveKey="2" onChange={callback}>
      <TabPane tab='tab 1' key="1">first</TabPane>
      <TabPane tab='tab 2' key="2">second</TabPane>
      <TabPane tab='tab 3' key="3">third</TabPane>
    </Tabs>
  ),
  document.getElementById('demo'));

demo

见 http://uxcore.github.io/uxcore/components/tabs/

API

Tabs

name	type	default	description
activeKey	String		current active tabPanel's key
defaultActiveKey	String	first active tabPanel's key	initial active tabPanel's key if activeKey is absent
onChange	Function	(key)	called when tabPanel is changed
onTabClick	Function	(key)	called when tab is clicked
destroyInactiveTabPane	Boolean	false	whether destroy inactive tabpane when change tab
type	string	large	large small filter brick open
animated	boolean	true	whether have animation effect when switch tab
tabBarPosition	string	top	top bottom left right
extraContent	ReactNode	null	the extra content on tab bar
tabBarStyle	object	{}	TabBar's style
tabContentStyle	object	{}	TabContent's style

TabPane

name	type	default	description
key	Object		corresponding to activeKey
tab	String		current tab's title corresponding to current tabPane