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|