uxcore-tabs

easy tab component based on react

Usage no npm install needed!

<script type="module">
  import uxcoreTabs from 'https://cdn.skypack.dev/uxcore-tabs';
</script>

README

uxcore-tabs

--

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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