Tabs
Group related alternatives in one reading area.
On this page
Markdown
Use Markdown for ordinary pages.
MDX
Use MDX to import components.
View code
import Tabs from "@chitrank2050/monoline-docs/components/Tabs.astro";
<Tabs id="format-example" labels={["Markdown", "MDX"]}>
<p slot="markdown">Use Markdown for ordinary pages.</p>
<p slot="mdx">Use MDX to import components.</p>
</Tabs>Usage
Named slots use lowercase label keys with punctuation replaced by hyphens. Arrow keys navigate tabs; all panels are readable without JavaScript.
Accessible group label
Local
Preview locally.
Production
Build before publishing.
View code
import Tabs from "@chitrank2050/monoline-docs/components/Tabs.astro";
<Tabs
id="environment-example"
label="Environment"
labels={["Local", "Production"]}
>
<p slot="local">Preview locally.</p>
<p slot="production">Build before publishing.</p>
</Tabs>API reference
| Name | Type | Default | Description |
|---|---|---|---|
id | string | Required | Starts with a letter; letters, digits, underscores and hyphens only. |
labels | string[] | Required | At least two unique labels with unique normalized keys. |
label | string | Options | Accessible group name. |
sync | package-manager | — | Optional package-manager synchronization. |
Behavior and accessibility
Use descriptive labels and unique page IDs. Arrow keys, Home and End move among tabs; all panels are readable without JavaScript.