Tabs
Tabs is a native web component that organizes content into panels selectable by a tab bar. Use it when you need to group related sections in the same space, showing one at a time. Each tab is a pura-tab element with its label, and the active panel is controlled by the active attribute on pura-tabs.
Preview
<pura-tabs active="0">
<pura-tab label="Account">
Manage your name, email and profile photo here.
</pura-tab>
<pura-tab label="Password">
Update your password and enable two-step verification.
</pura-tab>
<pura-tab label="Notifications">
Choose which alerts you want to receive by email.
</pura-tab>
</pura-tabs>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
active | number | 0 | Zero-based index of the active tab on pura-tabs; reflected when switching tabs. |
label | string | Tab {n} | Text of the tab button, set on each child pura-tab. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tabs.js"></script>import "./pura/lib/tabs.js";