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 (Angular)
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>
Custom tab header
The usage of a custom tab header should be limited to situations where there is a specific requirement for custom elements in the tab item header.
To append the current element to the header, you can easily achieve this by adding the slot="tab-item-header" attribute to any element within the triton-tab-item.
<triton-tab>
<triton-tab-item>
<div slot="tab-item-header">
Custom Text
</div>
</triton-tab-item>
<triton-tab-item tab-title="Tab 2">
The content of tab 1
</triton-tab-item>
</triton-tab>
In addition, you can utilize the tab-title element along with the slot="tab-item-header" to render the slot content before the title in the tab header.
This allows for further customization and flexibility in designing the tab item header.
It's important to note that the usage of
tab-titlewithslot="tab-item-header"should be approached with caution and only employed when necessary. It is not the recommended way to use triton-tab-item and should be reserved for specific cases that require this level of customization.
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
TritonTab
| 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' |
TritonTabItem
| 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 | 'body' |
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>