TailNG — Angular UI with Tailwind

Overview

tng-tabs is a headless tab container. Use tng-tab with value for each tab and tng-tab-panel with matching value for content. Control active tab via value / valueChange (controlled) or defaultValue (uncontrolled). orientation can be horizontal or vertical. Class hooks: rootKlass, listKlass, panelKlass on the container; tabKlass, activeKlass, inactiveKlass, disabledKlass on each tng-tab.

Quick example

Basic

HTML

CSS


<tng-tabs defaultValue="overview">
  <tng-tab value="overview">Overview</tng-tab>
  <tng-tab value="activity">Activity</tng-tab>
  <tng-tab value="settings">Settings</tng-tab>
  <tng-tab-panel value="overview">...</tng-tab-panel>
  <tng-tab-panel value="activity">...</tng-tab-panel>
  <tng-tab-panel value="settings">...</tng-tab-panel>
</tng-tabs>

import { TngTabs, TngTab, TngTabPanel } from '@tailng-ui/ui/layout';

Overview

Activity

Settings

Overview content.

Features

Controlled / uncontrolled

Use value and valueChange for controlled mode, or defaultValue for internal state.

Orientation

orientation: horizontal | vertical. Use listKlass/rootKlass for vertical layout (e.g. flex-col, grid).

Class hooks

TngTabs: rootKlass, listKlass, panelKlass. TngTab: tabKlass, activeKlass, inactiveKlass, disabledKlass.