Tabs
Tab-based content switching with arrow-key navigation; inactive panels are hidden via the hidden attribute. Use oas-tabs together with oas-tab-panel.
Basic usage
Basic usage
Content 1: basic information display.
Content 2: more details.
Content 3: other supplementary notes.
Default selection
Specify active
Content 1
Content 2
Content 3 selected by default
Rich content panels
Rich content
Card style
Card-style tabs
Content 1: card-style tabs have borders; the active tab connects with the panel, and the whole is wrapped by a four-side border.
Content 2: more details.
Content 3: other supplementary notes.
Switch to the card style with type="card": every tab has its own border, the active tab's bottom edge shares the panel's background color (connected without a break), and the whole is wrapped by a continuous four-side border.
Switch event
oas-change event
Content 1
Content 2
Closable
closable: each tab shows a close × on the right (span[tabindex="-1"], named for screen readers via aria-label, triggered by Enter / Space). Clicking × fires oas-close with detail: { key }; the component does not remove the panel automatically — the host removes it (the tab bar then refreshes incrementally).
Closable tabs
Content 1
Content 2
Content 3
Closing an inactive tab: the tab disappears immediately (visible feedback). Closing the active tab: it automatically switches to the first remaining tab and shows a message.
Badges
The badge attribute of oas-tab-panel renders a badge (number or text) next to the tab title.
Tabs with badges
Content 1: the badge shows a count.
Content 2: the badge can also display text.
Content 3: no badge.
Tab position
tab-position: top (default — tabs in a horizontal row above the content) / left (tabs stacked on the left, content on the right) / right / bottom.
left vertical tabs
Content 1: tabs stack vertically on the left, content on the right.
Content 2
Content 3
right vertical tabs
Content 1: tabs stack vertically on the right, content on the left.
Content 2
Content 3
bottom tabs
Content 1: tabs sit horizontally at the bottom, content above.
Content 2
Content 3
API
oas-tabs
| Attribute | Description | Type | Default |
|---|---|---|---|
active | The value of the active tab | string | — |
closable | Shows a close × on every tab; clicking fires oas-close (the component does not remove the panel) | boolean | — |
tab-position | Tab bar position: top (default) / left / right / bottom | string | top |
type | Style variant: line (underline, default) / card | string | line |
| Event | Description |
|---|---|
oas-change | Switched, detail: { value } |
oas-close | A tab's close × was clicked, detail: { key } (key is that tab's value; the component does not remove the panel) |
| Name | Description |
|---|---|
| default | — |
oas-tab-panel
| Attribute | Description | Type | Default |
|---|---|---|---|
badge | Badge next to the tab title (number or text) | — | — |
hidden | — | — | — |
label | Tab text | — | — |
value | Tab value | — | — |
| Name | Description |
|---|---|
| default | — |
Keyboard: after focusing the tab list, ← / → / ↑ / ↓ cycle through tabs; with a close button focused, Enter / Space triggers close. oas-tab-panel declares the hidden attribute to hide inactive panels (content stays in the DOM).