Tabs¶
Placeable in Canvas
A tabbed panel. Each Tab Item is a real Bootstrap .tab-pane in its final place — nothing is cloned — so the element the page builder tracks is the element Bootstrap shows.
Usage
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
tabs_id |
Optional | string | Optional. Leave empty unless you need to link to it. |
Slots¶
| Slot | Description |
|---|---|
items |
The tabs. See the Tab Item tab. |
Arrow keys, Home and End come from Bootstrap's own tab.js. Give every tab a distinct title — it's the tab's accessible name. → Full accessibility guidelines
The nav is generated, the panes are not
A slot cannot read its children's props from Twig, so ixm-tabs.js builds the .nav-tabs list from each pane's data-tab-title. Bootstrap's own tab.js then drives it — which is where the arrow/Home/End keyboard navigation comes from.
Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
title |
Optional | string | The tab label. | Tab 1 |
body |
Optional | string | The tab content. | <p>Tab content goes here.</p> |
Tokens used by this component
| Token | Default |
|---|---|
--ixm-tabs-focus-outline-color |
var(--theme-color-primary, var(--bs-primary, #0d6efd)) |
--ixm-tabs-indicator-color |
var(--theme-color-primary, var(--bs-primary, #0d6efd)) |
--ixm-tabs-indicator-width |
2px |
--ixm-tabs-nav-link-* |
(several — see full reference) |
--ixm-tabs-transition-duration |
var(--theme-duration, 150ms) |
--ixm-tabs-transition-ease |
var(--theme-ease, ease-out) |
--ixm-tabs-underline-color |
var(--theme-color-border, var(--bs-border-color, #dee2e6)) |
--ixm-tabs-underline-width |
1px |