Components
Tabs
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Tabs } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
tabs | — | — | The strip contents, each { id, label }. Order is render order; the strip scrolls horizontally once they overflow. |
selectedId | — | "summary" | Id of the active tab. Controlled — Tabs holds no state, so this must come from the caller. |
onSelect | — | — | Fires with the pressed tab id. Without it the strip is inert. |
Examples
Interactive
{
function Controlled() {
const [selected, setSelected] = React.useState('summary');
return <Tabs {...args} selectedId={selected} onSelect={setSelected} />;
}
return <Controlled />;
}Overflowing
The strip scrolls horizontally once the labels overflow.
<Tabs
tabs={[
...TABS,
{ id: 'four', label: 'Tab four' },
{ id: 'five', label: 'Tab five' },
{ id: 'six', label: 'Tab six' },
{ id: 'seven', label: 'Tab seven' },
]}
/>