@litforge/tabs

A tabs component for organizing content into multiple panels with different variants and orientations.

Installation

npm install @litforge/tabs
# or
pnpm add @litforge/tabs
# or
yarn add @litforge/tabs

Usage

import '@litforge/tabs';

<lf-tabs
  active-tab="preview"
  variant="default"
  orientation="horizontal"
  @tab-change="${handleTabChange}"
>
  <lf-tab-item id="preview" label="Preview">
    Preview content here
  </lf-tab-item>
  <lf-tab-item id="metadata" label="Metadata">
    Metadata content here
  </lf-tab-item>
</lf-tabs>

Props

lf-tabs

| Property | Type | Default | Description | |----------|------|---------|-------------| | activeTab | string | '' | ID of the currently active tab | | variant | 'default' \| 'pills' \| 'underline' | 'default' | Visual variant | | orientation | 'horizontal' \| 'vertical' | 'horizontal' | Layout orientation |

lf-tab-item

| Property | Type | Default | Description | |----------|------|---------|-------------| | id | string | '' | Unique identifier for the tab | | label | string | '' | Display label for the tab button | | active | boolean | false | Whether the tab is active (managed by parent) |

Events

tab-change

Fired when a tab is clicked.

interface TabChangeDetail {
  tabId: string;
}

Variants

• default: Standard tabs with bottom border indicator
• pills: Rounded pill-style tabs with filled background
• underline: Minimal tabs with underline indicator

Examples

Basic Usage

<lf-tabs active-tab="tab1">
  <lf-tab-item id="tab1" label="Tab 1">
    Content 1
  </lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">
    Content 2
  </lf-tab-item>
</lf-tabs>

Pills Variant

<lf-tabs active-tab="tab1" variant="pills">
  <lf-tab-item id="tab1" label="Tab 1">Content 1</lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">Content 2</lf-tab-item>
</lf-tabs>

Vertical Orientation

<lf-tabs active-tab="tab1" orientation="vertical">
  <lf-tab-item id="tab1" label="Tab 1">Content 1</lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">Content 2</lf-tab-item>
</lf-tabs>

With Event Handler

<lf-tabs
  active-tab="${activeTab}"
  @tab-change="${(e) => {
    activeTab = e.detail.tabId;
  }}"
>
  <lf-tab-item id="preview" label="Preview">Preview content</lf-tab-item>
  <lf-tab-item id="metadata" label="Metadata">Metadata content</lf-tab-item>
</lf-tabs>

CSS Variables

The component uses CSS variables for theming:

• --lf-tabs-font-family
• --lf-tabs-gap
• --lf-tabs-border
• --lf-tab-padding-y
• --lf-tab-padding-x
• --lf-tab-color
• --lf-tab-active-color
• --lf-tab-active-border
• --lf-tab-hover-bg
• --lf-tab-content-padding

Framework Integration

Vue 3 / Nuxt

<script setup>
import '@litforge/tabs';
import { ref } from 'vue';

const activeTab = ref('preview');

const handleTabChange = (e) => {
  activeTab.value = e.detail.tabId;
};
</script>

<template>
  <lf-tabs :active-tab="activeTab" @tab-change="handleTabChange">
    <lf-tab-item id="preview" label="Preview">
      Preview content
    </lf-tab-item>
    <lf-tab-item id="metadata" label="Metadata">
      Metadata content
    </lf-tab-item>
  </lf-tabs>
</template>

Register in nuxt.config.ts:

vue: {
  compilerOptions: {
    isCustomElement: (tag) => ['lf-tabs', 'lf-tab-item'].includes(tag)
  }
}