This ReactJS-based, customizable, data-driven component allows creating nice looking tabs control very fast and easy.
import TabsControl from '@src/components/tabsControl/TabsControl';
this.state = { tabsData: [{ title: 'First tab', id: 'firstTab', content: (<div> <Alert status="error" message="This tab was loaded from tab data item's content." /> </div>), icon: 'charging-station', iconColor: 'blue' }, { title: 'Second tab - active by default, no icon', id: 'secondTab', active: true, component: lazy(() => import('@src/modules/componentsDemo/DemoLazyComponent')), data: { text: 'This data was passed from the TabsControl data object' } }, { title: 'Third tab', id: 'thirdTab', icon: 'biohazard', iconClassName: 'icon-big-red' }] };
<TabsControl data={this.state.tabsData} />
Every object in this array has the following fields:
icon (String) - Fontawesome-based name of icon, for example, "charging-station" If the previous "icon" props is null, the following props will be ignored:
iconColor (String) - Any string color like "yellow" or "#FFF"
lazy(() => import(string_path_to_component))
You also can pass a parameter into a component that is loaded lazy.
You can access it as props:
<div><strong>{this.props.data.text}</strong></div>