elements

Tabs

Check apps dependencies

This is the Tabs element

Package version

npm i module-tsl-ui-elements --save
6.7.7

imports

import { Tabs } from 'module-tsl-ui-elements';
@import '~module-tsl-ui-elements/tabs/tabs';

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>
      );
    }
  }

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

storybook

View Tabs storybook stories