houyulei / Tabs

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 = [...new Array(numberOfTabs)].map((_, i) => `tab${i}`);

const Panels = [...new Array(numberOfTabs)].map((_, i) =>
    (
        <div key={i}>
            <div className="myItem">{i}</div>
        </div>
    )
);

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 = index => {
    // Don't do costing things.
    // Meybe you should not use this api,use transitionEnd instead.

    console.log(`onChange:${index}`)
}
const transitionEnd = index => {
    // You may do some costing things here instead of in onChange callback for better performance!

    // fetch()
    // render()

    console.log(`transitionEnd:${index}`)
}

const TabsExample = () => (
    <div>
        <Tabs
            defaultIndex={2}
            onChange={onChange}
            transitionEnd={transitionEnd}
            tabs={tabs}
            tabPanelStyle={tabPanelStyle}
            className="myTabs"
        >
            {Panels}
        </Tabs>
    </div>
)