@duskmoon-dev/el-tabs

A tabbed interface component built with Web Components.

Installation

bun add @duskmoon-dev/el-tabs

Usage

Auto-Register

import '@duskmoon-dev/el-tabs/register';

<el-dm-tabs>
  <el-dm-tab label="Tab 1">Content for tab 1</el-dm-tab>
  <el-dm-tab label="Tab 2">Content for tab 2</el-dm-tab>
  <el-dm-tab label="Tab 3">Content for tab 3</el-dm-tab>
</el-dm-tabs>

Manual Registration

import { ElDmTabs, ElDmTab, register } from '@duskmoon-dev/el-tabs';

// Register with default tag names
register();

// Or register with custom tag names
customElements.define('my-tabs', ElDmTabs);
customElements.define('my-tab', ElDmTab);

Variants

| Variant | Description | |---------|-------------| | default | Default style | | pills | Pill-shaped tabs | | underline | Underlined tabs |

Orientations

| Orientation | Description | |-------------|-------------| | horizontal | Horizontal tabs (default) | | vertical | Vertical tabs |

Attributes (el-dm-tabs)

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | value | string | - | Active tab value | | variant | string | 'default' | Style variant | | color | string | 'primary' | Color variant | | orientation | string | 'horizontal' | Tab orientation |

Attributes (el-dm-tab)

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | label | string | '' | Tab label | | value | string | - | Tab value (auto-generated if not set) | | disabled | boolean | false | Disable the tab |

CSS Parts (el-dm-tabs)

| Part | Description | |------|-------------| | tablist | The tab list container | | indicator | The active tab indicator |

Events

| Event | Detail | Description | |-------|--------|-------------| | change | { value, index } | Fired when active tab changes |

Examples

Basic

<el-dm-tabs>
  <el-dm-tab label="Overview">Overview content</el-dm-tab>
  <el-dm-tab label="Details">Details content</el-dm-tab>
  <el-dm-tab label="Settings">Settings content</el-dm-tab>
</el-dm-tabs>

Pills Variant

<el-dm-tabs variant="pills">
  <el-dm-tab label="Tab 1">Content 1</el-dm-tab>
  <el-dm-tab label="Tab 2">Content 2</el-dm-tab>
</el-dm-tabs>

Underline Variant

<el-dm-tabs variant="underline">
  <el-dm-tab label="Tab 1">Content 1</el-dm-tab>
  <el-dm-tab label="Tab 2">Content 2</el-dm-tab>
</el-dm-tabs>

Vertical Orientation

<el-dm-tabs orientation="vertical">
  <el-dm-tab label="Tab 1">Content 1</el-dm-tab>
  <el-dm-tab label="Tab 2">Content 2</el-dm-tab>
  <el-dm-tab label="Tab 3">Content 3</el-dm-tab>
</el-dm-tabs>

Disabled Tab

<el-dm-tabs>
  <el-dm-tab label="Active">Active content</el-dm-tab>
  <el-dm-tab label="Disabled" disabled>Disabled content</el-dm-tab>
</el-dm-tabs>

Controlled Value

<el-dm-tabs value="settings">
  <el-dm-tab label="Home" value="home">Home content</el-dm-tab>
  <el-dm-tab label="Settings" value="settings">Settings content</el-dm-tab>
</el-dm-tabs>

License

MIT