Documentation
Tabs
Tabs is used to display content in a tabs like way. The appearance is the same as code editor.
Its main task is to be able to show more examples in the anatomy section of the UX documentation of a component.
This is because there can be many different states on a component that you want to show without getting an unnecessarily long vertical presentation.
It uses items menu to build the tabs and Zustandto keep the states.
Example from input-fields component documentation.
Code examples
Abbreviated example from input-fields component documentation.
// Import components and images
import {Tabs, Tab, TabPanel, TabPanels, TabMenu } from '@components/tabs';
import { Paper } from 'trinidad-ui';
import anatomySingleInactive from 'public/images/components/forms/input/anatomy/anatomy-single-line-inactive.png';
import anatomySingleDisabled from 'public/images/components/forms/input/anatomy/anatomy-single-line-disabled.png';
<Paper>
<Tabs>
<TabMenu>
<Tab label='Inactive' />
<Tab label='Focus' />
<Tab label='Active' />
<Tab label='Error' />
<Tab label='Disabled' />
</TabMenu>
<TabPanels>
<TabPanel>
<Image src={anatomySingleInactive} alt="Inactive input field" noAnimation />
<div className='padding-xs-2'>
a. Container<br />
b. Prefix (optional)<br />
c. Label<br />
*Suffix and icon are both aligned to the far right, within the container, and should not co-exist.
</div>
</TabPanel>
<TabPanel>
<Image src={anatomySingleFocus} alt="Input field in focus" noAnimation/>
<div className='padding-xs-2'>
a. Container<br />
b. Prefix (optional)<br />
c. Label or help text<br />
*Suffix and icon are both aligned to the far right, within the container, and should not co-exist.
</div>
</TabPanel>
</TabPanels>
</Tabs>
</Paper>
Props table
Tabs
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | children |
Tab-menu
Is actually a wrapper for ìtems-menu.
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | children | |
| ...props | spread props |
Tab
Is actually a wrapper for a link-item found in ìtems-menu.
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | children | |
| ...props | spread props |
Tab-panels
Holds all panels that are displayed below the tabs menu (item-menu).
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | children |
Tab-panel
Panel content for active tab.
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | children | |
| ...props | spread props |