Introduce
Tabs component of React,designed for mobile.Support gestures and lots of tabs.
正式版,已在大型商业项目中使用,有问题提issue,永久更新.
Installation
$ npm install silk-tabs --save
How To Use
import React from 'react';import ReactDOM from 'react-dom';import Tabs from 'silk-tabs'; import 'silk-tabs/style/Tabs.css'; const numberOfTabs = 8;const tabs = ...numberOfTabs; const Panels = ...numberOfTabs; const tabPanelStyle = container: overflow: 'hidden' visibility: 'hidden' position: 'relative' wrapper: overflow: 'hidden' position: 'relative' child: float: 'left' width: '100%' position: 'relative' transitionProperty: 'transform' height: '250px' const onChange = { // Don't do costing things. // Meybe you should not use this api,use transitionEnd instead. console}const transitionEnd = { // You may do some costing things here instead of in onChange callback for better performance! // fetch() // render() console} const TabsExample = <div> <Tabs = = = = = ="myTabs" > Panels </Tabs> </div>
API
Tabs
Props
Property | Description | Type | Default |
---|---|---|---|
className | className of container | String | |
defaultIndex | default index position of tabs | Number | 0 |
onChange | runs at tab change | Function | |
transitionEnd | runs at the end slide transition | Function | |
tabs | contents of tabs | Array[React.node] | |
containerStyle | style of container | ||
tabStyle | style of tabs,useful when tabs fixed top | ||
tabPanelStyle | style of TabPanels |
tabPanelStyle defaults
style: {
container: {
overflow: 'hidden',
visibility: 'hidden',
position: 'relative'
},
wrapper: {
overflow: 'hidden',
position: 'relative'
},
child: {
float: 'left',
width: '100%',
position: 'relative',
transitionProperty: 'transform'
}
Tabs.css is styled by px,you can change to rem if needed,for example: