Tabs
Tabs is a stateless component. This means that you will need to provide that stateful wrapper around it.
You'll need to provide the activeDataId
prop back to the component on each onTabClick
.
Also, the tab content will need to be swapped out when the active tab changes.
function Demo() { const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees" disabled> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings" disabled tooltipProps={{ title: 'Tooltip', container: () => document.querySelector('#demo-component-one'), }} > Holdings Content </Tab>, <Tab key="AssetMix" id="AssetMix"> Asset Mix Content </Tab>, <Tab key="AccountHistory" id="AccountHistory"> Account History Content </Tab>, <Tab key="SubAccounts" id="SubAccounts"> Sub-Accounts Content </Tab>, <Tab key="Notes" id="Notes"> Notes Content </Tab>, <Tab key="Retirement" id="Retirement"> Retirement / Investment Content </Tab>, <Tab key="Another" id="Another"> Another Content </Tab>, ]; const tabContent = { Ownership: 'Ownership Content', Fees: 'Fees Content', Realization: 'Realization Content', Holdings: 'Holdings Content', AssetMix: 'Asset Mix Content', AccountHistory: 'Account History Content', SubAccounts: 'Sub-Accounts Content', Notes: 'Notes Content', Retirement: 'Retirement / Investment Content', Another: 'Another Content', }; const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs id="demo-component-one" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} > <div style={{ paddingTop: '20px' }}>{tabContent[activeTabId]}</div> </Tabs> ); }
Variants
Tabs
Tabs will be rendered as a list of underlined elements.
const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <div data-testid="pw-tabs"> <Tabs variant="tabs" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> </div> ); } render(<Demo />);
Underline
Underline will be rendered similiarly to tabs
but will have a solid underline across all tabs.
const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <div data-testid="pw-tabs-underline"> <Tabs variant="underline" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> </div> ); } render(<Demo />);
Pills
Pills will be rendered as a list of rounded elements.
const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <div data-testid="pw-tabs-pills"> <Tabs variant="pills" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> </div> ); } render(<Demo />);
Vertical
Vertical tabs will always be rendered as pills.
const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <div data-testid="pw-tabs-vertical"> <Tabs vertical tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> </div> ); } render(<Demo />);
Sizes
Tabs can be rendered as small, medium (default), or large.
const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; render( <div data-testid="pw-tabs-sizes"> <Tabs size="sm" tabs={tabsList}></Tabs> <Tabs size="md" tabs={tabsList}></Tabs> <Tabs size="lg" tabs={tabsList}></Tabs> </div>, );
TabNav
The TabNav component is used within Tabs but can also be used by itself to create more customized tabs.
function Example() { // An array of tuples, where the first element is the tab id and the second element is the content const tabs = [ ['One', <div id="oneContent">Content of Tab One</div>], ['Two', <div id="twoContent">Content of Tab Two</div>], ]; const [activeTab, setActiveTab] = React.useState('One'); const handleTabClick = (event, tabId) => { setActiveTab(tabId); }; const renderTabContent = () => { let activeTabContent; tabs.forEach(([id, tabPanel]) => { if (id === activeTab) { activeTabContent = tabPanel; } }); return <div style={{ paddingTop: '20px' }}>{activeTabContent}</div>; }; return ( <div> <TabNav activeTabId={activeTab}> {tabs.map(([id]) => ( <Tab id={id} key={id} onClick={(event) => handleTabClick(event, id)}> {id} </Tab> ))} </TabNav> {renderTabContent()} </div> ); }
Best Practices
- Keep tab labels concise, but descriptive.
- Avoid using a group of tabs that will exceed the width of the content area at the smallest desktop resolution.
- Use Title Case for tab text.
- Items in a tab group should be ordered by priority or hierarchy. For longer groups (10 items or greater), consider using alphabetical order.
- Avoid using the same word to start multiple tabs within the group.
Analytics
The Tabs component is trackable through Kyber Analytics. This is the default analytics config.
export default {
value: 'Tabs',
actions: {
onTabClick: { type: 'TABS_ONTABCLICK', payload: 'Click' },
},
};