This is the Tabs element
Package version
npm i module-tsl-ui-elements --save
6.7.7
example (editable)
body 1
body 2
body 3
class ControlledTabs extends React.Component { constructor(props) { super(props); this.state = { tab: 0 }; } render() { return ( <div className="tes-js" style={{ padding: 10 }}> <Tabs content={[ { label: 'tab 1', body: <div>body 1</div>, }, { label: 'tab 2', body: <div>body 2</div>, }, { label: 'tab 3', body: <div>body 3</div>, } ]} activeTab={this.state.tab} onActivate={(tab, idx) => this.setState({ tab: idx })} /> </div> ); } }
example with links (editable)
You can also specify the href
and target
on the content object so you will have a tab as link.
Try changing defaultActiveTab
to see the active one.
class TabsLinks extends React.Component { render() { return ( <div className="tes-js" style={{ padding: 10 }}> <Tabs content={[ { label: 'To google.com', href: 'https://google.com/', }, { label: 'To tes.com', href: 'https://www.tes.com', }, { label: 'To a new tab', href: 'https://www.tes.com', target: '_blank', } ]} defaultActiveTab={0} /> </div> ); } }
Props
We couldn't detect props! Check if __docgenInfo is correctly defined