Tab
Tabs are a navigation tool which splits content into pages, allowing users to select which page they want to see. This can be useful, both to contain completely different parts of the UI, or to simply display different versions of a minor UI element.
Basic Usage
<triton-tab>
<triton-tab-item tab-title="Tab 1"> The content of tab 1 </triton-tab-item>
<triton-tab-item tab-title="Tab 2" active> The content of tab 2 </triton-tab-item>
<triton-tab-item tab-title="Tab 3" disabled> The content of tab 3 </triton-tab-item>
</triton-tab>
<TritonTab>
<TritonTabItem tab-title="Tab 1"> The content of tab 1 </TritonTabItem>
<TritonTabItem tab-title="Tab 2" active> The content of tab 2 </TritonTabItem>
<TritonTabItem tab-title="Tab 3" disabled> The content of tab 3 </TritonTabItem>
</TritonTab>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<TritonTab>
<TritonTabItem tab-title="Tab 1"> The content of tab 1 </TritonTabItem>
<TritonTabItem tab-title="Tab 2" active> The content of tab 2 </TritonTabItem>
<TritonTabItem tab-title="Tab 3" disabled> The content of tab 3 </TritonTabItem>
</TritonTab>
</body>
</html>
Variants
The default tab is horizontal, as seen in the basic example.
Vertical Tabs
Tabs can also be set up to fall vertically, as opposed to their default horizontal orientation. To achieve this, set the orientation property to vertical.
<triton-tab orientation="vertical">
<triton-tab-item tab-title="Tab 1">The content of tab 1</triton-tab-item>
<triton-tab-item tab-title="Tab 2">The content of tab 2</triton-tab-item>
<triton-tab-item tab-title="Tab 3">The content of tab 3</triton-tab-item>
</triton-tab>
Behavior
Menu with Routing
To use the tab component as a menu, pass in the component without any content. The router implementation depends on your framework.
For Angular, use the RouterModule and apply routerLinkActive and routerLink on the TritonTabItem element.
With routerLinkActive set to active, the component will trigger the correct state on the selected tab item.
<triton-tab>
<triton-tab-item tab-title="Orders" icon-leading="broadcast">The content of tab 1</triton-tab-item>
<triton-tab-item tab-title="Details" icon-leading="box" active>The content of tab 2</triton-tab-item>
<triton-tab-item tab-title="Report" icon-leading="chat-buble">The content of tab 3</triton-tab-item>
<triton-tab-item tab-title="Critical" icon-leading="cancel">The content of tab 4</triton-tab-item>
</triton-tab>
Appearance
Fluid Width
By setting the fluid property to true, you can force the TritonTab to fill the full width of its container.
<triton-tab fluid="true">
<triton-tab-item tab-title="Tab 1">The content of tab 1</triton-tab-item>
<triton-tab-item tab-title="Tab 2">The content of tab 2</triton-tab-item>
<triton-tab-item tab-title="Tab 3">The content of tab 3</triton-tab-item>
</triton-tab>
Size
The following sizes are available in the Triton Design System.
<triton-tab size="small">
<triton-tab-item tab-title="Tab 1">small size tab 1</triton-tab-item>
...
</triton-tab>
<triton-tab size="base">
<triton-tab-item tab-title="Tab 1">base size tab 1</triton-tab-item>
...
</triton-tab>
Playground
API
Properties
triton-tab
| Property | Description | Type | Default |
|---|---|---|---|
fluid | If true, the element fills all available width | boolean | false |
orientation | Set the orientation of the tabs. If set to vertical the tabs will group downwardsNote The fluid property is not compatible with vertical orientation | horizontal vertical | 'horizontal' |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'base' |
triton-tab-item
| Property | Description | Type | Default |
|---|---|---|---|
active | The tab that is currently open | boolean | false |
disabled | If true, the component will look disabled and not be interactable | boolean | - |
fluid | If true, the element fills as much width as it can | boolean | - |
icon-leading | Icon displayed on the left of the tabs title | Icon | - |
icon-trailing | Icon displayed on the right of the tabs title | Icon | - |
notification-count | Display number of new notifications on the tab | number | - |
size | Set the size of the tab in the tab bar | base body large medium small tiny xlarge xxlarge xxxlarge | defaultOptions.baseSize |
tab-title | The title to be displayed on the tab | string | - |
Slots
Main
can only be a TritonTabItem, any other element will be ignored
<triton-tab>
<div></div>
</triton-tab>