Tab
Tabs are used to navigate between different views within the same page or context.
Demo
Usage
When to use
- Navigate between different views in the same context. Use tabs to show several areas of related content.
When not to use
- Comparing content. Don't use tabs to compare content.
- Content with a set order. Don't use tabs to show content or forms that need to be completed in a set order. A user can move back and forth between tabs.
Format
Label
- Use short, easy to understand labels for tabs.
- The label should summarize the content. Content inside a tab should be obvious from it's label.
- Don't repeat the same word across several tabs.
Options
Icon
Demo
<TabBar>
<Tab icon={<IconSubscribe16 />}>Notifications</Tab>
<Tab icon={<IconShare16 />} selected>
Sharing and access
</Tab>
<Tab icon={<IconDownload16 />}>Downloads</Tab>
</TabBar>
- A tab can show an icon.
- Use icons to support the text label by providing context or a visual reference.
- Don't include icons for decoration only, they add complexity to the interface.
State: Disabled
Demo
In the example above you can see the 3rd tab is disabled.
<TabBar>
<Tab>Tab label 1</Tab>
<Tab selected>Tab label 2</Tab>
<Tab disabled>Tab label 3</Tab>
<Tab disabled>Tab label 4</Tab>
</TabBar>
- Use a disabled state if a tab can't be used temporarily.
- Show a
Tooltip
when hovering a disabled tab to give a short explanation of why the tab can't be used. - If a tab will never be enabled in the current context, remove it instead.
API Reference
Tab
Usage
To use Tab
, you can import the component from the @dhis2/ui
library
import { Tab } from '@dhis2/ui'
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
children | node | |||
className | string | |||
dataTest | string | 'dhis2-uicore-tab' | ||
disabled | boolean | |||
icon | element | |||
selected | boolean | Indicates this tab is selected | ||
onClick | function | Called with the signature ({}, event) |
TabBar
Usage
To use TabBar
, you can import the component from the @dhis2/ui
library
import { TabBar } from '@dhis2/ui'
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
children | node | |||
className | string | |||
dataTest | string | 'dhis2-uicore-tabbar' | ||
fixed | boolean | Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time. | ||
scrollable | boolean | Enables horizontal scrolling for many tabs that don't fit the width of the container |