Tabs. Keyboard-operable switchable article panels.
- Article structure
- Interactive
- Stability · Initial
- ::postkit-tabs
Map authored tags to Postkit components.
Use portable directives for rich content.
Render a structured portable document.
Usage.
<Tabs
label="Rendering approaches"
items='[{"label":"MDX","content":"Map authored tags to Postkit components."},{"label":"Markdown","content":"Use portable directives for rich content."},{"label":"JSON","content":"Render a structured portable document."}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsRequired | JSON string | None | A JSON array of tab labels and content. |
| label | string | "Tabbed content" | An accessible label for the tab list. |
| initialIndex | number | 0 | The initially selected tab index. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- list
- tab
- panels
- panel
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroHydrated
- Web components @postkit/elementsPlanned