Code

Props

Props	Data Type	Required
children	TabGroupElement	✅
className	string	❌
defaultTab	number	❌

Default Tab

In the case a developer needs to show a specific Tab of the TabGroup Component at rendering, the developer can select which Tab to render at passing a numer from 1 and ahead, depending on the TabGroupElement components inserted inside the TabGroup.

TabGroupElement

Children element to insert inside TabGroup component.

Developers can insert as much TabGroupElement components as they want and based on that number, that is going to be the number of tabs to generated automatically.

Props	Data Type	Required
children	HTML Tags Custom Components	✅
className	string	❌
title	string	✅
icon	string	❌
disabled	boolean	❌

className

This class is going to be added directly to the custom content section of the tab, where developers can insert custom structures.

Example

import React from 'react';
import {TabGroup, TabGroupElement} from '@2600hz/sds-react-components';

const Example = ()=>{
    return(
        <div className='container'>
            <TabGroup defaultTab={2}>
                <TabGroupElement title='First Tab'>
                    <p>Some random text...</p>
                </TabGroupElement>
                <TabGroupElement title='Second Tab'>
                    <p>Some random text...</p>
                </TabGroupElement>
                <TabGroupElement title='Third Tab'>
                    <p>Some random text...</p>
                </TabGroupElement>
            </TabGroup>
        </div>
    );
}

export default Example;

Components Dependency

For this component elaboration there were used the following internal components:

• Telicon

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.​

React

General Components / Tab Group - Basic Tab Group ⋅ Storybooksipster-react-component-storybook.netlify.app