Tableau de Bord
Components
Reusable component catalogue, usage register, variables, and live examples.
Used in
No production-page use is registered yet.
Selected component
TABs
src/components/Tabs.astro Variables
| Property | Example | Purpose |
|---|---|---|
id | product-tabs | Optional stable prefix for generated tab and panel ids. |
ariaLabel | Product sections | Accessible name for the tab list. |
activeTab | overview | Selects the initial child by its data-tab-id. |
variant | line | Selects line, boxed, or pills. |
alignment | start | Places tabs at the start, center, or stretches them equally. |
activation | automatic | Controls whether arrow-key focus immediately changes the panel. |
panelBorder | true | Draws a border around the active panel area. |
data-tab-label | Overview | Required child attribute used to generate the tab button. |
data-tab-id | overview | Optional stable key for initial selection and change events. |
data-tab-disabled | boolean | Shows a disabled tab that cannot be selected. |
Keyboard and integration details
Use Left/Right arrows, Home, and End to move through enabled tabs. In manual mode,
press Enter or Space to activate the focused tab. Every change emits
bf-tabs-change with event.detail.tabId.
Live clickable example
Panels are ordinary slotted Astro markup. On narrow screens the tab row scrolls horizontally instead of squeezing labels into unreadable widths.
Overview
A tab panel can contain headings, forms, tables, images, or another reusable component.
Prices
Example: show recent observations, a chart, and controls without leaving the current page.
Images
Example: keep a gallery or image editor in its own focused section.
Audit
This disabled example demonstrates a section that is visible in the tab row but not available yet.