Angular Tabs

On this page

Introduced in 5.2.0+

## Examples The basic Angular tabs example uses the `variant="tabs"` prop to generate a tabbed interface.

## Available styles Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own. ### Unstyled If you don’t provide the `variant` prop, the component will default to a basic style.

### Pills Take that same code, but use `variant="pills"` instead:

### Underline With the same code, use `variant="underline"`:

### Underline border Use the same code again, with `variant="underline-border"`:

## Tabs layout ### Fill Force your tabs content to extend the full available width one of modifier classes. To proportionately fill all available space use `layout="fill"`. With all horizontal space occupied, not every tab item has the same width.

### Justify For equal-width elements, use `layout="justified"`. All horizontal space is occupied by tabs, but unlike the `layout="fill"` above, every tab item has the same width.

## Accessibility Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes convey their structure, functionality and current state to users of assistive technologies (such as screen readers). ### WAI-ARIA Roles - The element that serves as the container for the set of tabs has the role `tablist`. - Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`. - Each element that contains the content panel for a tab has the role `tabpanel`. - If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`. - Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element. - The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`. - Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element. CoreUI Angular Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below. This example demonstrates how to manually set `aria-controls`, and `aria-labelledby` attributes on your tabs and tab panels. ### Keyboard Interaction **When focus enters the tabs list:** - Tab: It places focus on the active tab element. **When focus is on a tab element:** - Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier. - Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab. - Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab. - Home: Moves focus to the first tab. - End

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `activeItemKey` | Preset the active item key. | `number` \| `string` | _undefined_ | | `id` | HTML id attribute. | `string` | _tabs-n_ |

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `activeItemKeyChange` | Event emitted on `activeItemKey` change. | `number` \| `string` |

### c-tabs-list _component_ `exportAs: cTabsList` ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `layout` | Specify a layout type for tabs list | `fill` \| `justified` | _undefined_ | | `variant` | Set the variant of tabs | `pills` \| `tabs` \| `underline` \| `underline-border` | _undefined_ | | `role` | Role attribute | `string` | _tablist_ |

### cTab _directive_ `exportAs: cTab` ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabled` | Disabled button attribute | `boolean` | _false_ | | `itemKey` | Item key | `string` \| `number` | _(required)_ | | `id` | HTML id attribute | `string` | _undefined_ | | `aria-controls` | aria-controls attribute | `string` | _undefined_ |

### c-tabs-content _component_ `exportAs: cTabsContent` - wrapper for tab panels ### c-tab-panel _component_ `exportAs: cTabPanel` ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `ariaLabelledBy` | aria-labelledby attribute | `string` | _undefined_ | | `id` | HTML id attribute | `string` | _undefined_ | | `itemKey` | Item key | `string` \| `number` | _(required)_ | | `tabindex` | Tabindex attribute | `number` | _0_ | | `transition` | Enable fade in transition | `boolean` | _true_ |

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `visibleChange` | Event emitted on visible change. | `{ itemKey: string \| number; visible: boolean }` |