Components
Usage
Tabs organize content across different views. Use Tabs with Tab children.
import { Tabs, Tab } from "@udixio/ui-react"Variants
- primary (default)
- secondary
<div class={"space-y-2"}>
<Tabs variant="primary">
<Tab label="One" selected />
<Tab label="Two" />
</Tabs>
<Tabs variant="secondary">
<Tab label="One" selected/>
<Tab label="Two" />
</Tabs>
</div>Controlled selection and scrollable
Use selectedTab and setSelectedTab for controlled state. Set scrollable to true to enable horizontal scroll with automatic centering of the selected tab.
function Example() {
const [tab, setTab] = React.useState(0)
return (
<Tabs selectedTab={tab} setSelectedTab={setTab} scrollable>
<Tab label="Overview" />
<Tab label="Activity" />
<Tab label="Settings" />
<Tab label="Billing" />
<Tab label="Advanced" />
</Tabs>
)
}