Tabs are text-based markers used for switching between parts of a workflow or interface.
Overview
Tabs are made up of three sub components: Tab, Tab Nav, and Tab Title. Together they provide a solution to switch views and navigate between parts of the interface. Tabs can contain supportive icons, and have different layouts and positions to fill many interface needs. Tabs should not be used as top-level navigation.
Usage
- Organize related information into categories to reduce cognitive load.
- Tabs should contain at least two items, and one selected Tab Title at a time.
Sample
<calcite-tabs>
<calcite-tab-nav slot="title-group">
<calcite-tab-title selected>
Watercraft
</calcite-tab-title>
<calcite-tab-title>Automobiles</calcite-tab-title>
<calcite-tab-title>Aircraft</calcite-tab-title>
</calcite-tab-nav>
<calcite-tab selected>
<calcite-notice icon="embark" open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-tab>
<calcite-tab>
<calcite-notice icon="car" open>
<div slot="message">A good choice for inland adventure</div>
</calcite-notice>
</calcite-tab>
<calcite-tab>
<calcite-notice icon="plane" open>
<div slot="message">Cross continents quickly</div>
</calcite-notice>
</calcite-tab>
</calcite-tabs>
Best practices
Below are important guidelines on using the Tabs component.
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow right | When focused on a calcite-tab-title , moves focus to the next calcite-tab-title . If the current focus is on first calcite-tab-title , the focus will cycle to the last calcite-tab-title . |
Arrow left | When focused on a calcite-tab-title , moves focus to the previous calcite-tab-title . If the current focus is on last calcite-tab-title , the focus will cycle to the first calcite-tab-title . |
Enter | When focused on a calcite-tab-title , selects the focused calcite-tab-title . |
Space | When focused on a calcite-tab-title , selects the focused calcite-tab-title . |
Home | When focused on a calcite-tab-title , moves focus to the first calcite-tab-title . |
End | When focused on a calcite-tab-title , moves focus to the last calcite-tab-title . |
Tab | Moves focus to the selected calcite-tab . If the calcite-tab is focused, moves focus to the calcite-tab contents. If the calcite-tab contents are focused, the focus will leave the component. |
Tab and Shift | Moves focus to the selected calcite-tab . If the calcite-tab is focused, moves focus to the calcite-tab-title . If the calcite-tab-title is focused, the focus will leave the component. |
Writing and copy
- Keep text in Tabs short and succinct
- Avoid using more than 1-2 words in each item
- Do not use punctuation like commas, or periods in Tabs
- Do not use contractions such as "you're", "aren't", "can't", and "haven't" to reduce confusion
- Avoid writing text as questions
- Recommended character maximum for each item: 20
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
bordered | bordered | When true , the component will display with a folder style menu. | boolean | false |
layout | layout | Specifies the layout of the calcite-tab-nav , justifying the calcite-tab-title s to the start ("inline" ), or across and centered ("center" ). | "center" | "inline" | "inline" |
position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to the calcite-tabs . | "bottom" | "top" | "top" |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-tab s. |
title-group | A slot for adding a calcite-tab-nav . |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |