ng tailng

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. Slot-based styling: container, tabList, panelContainer on tng-tabs; tab, active, inactive, disabled on each tng-tab.

Quick example

Basic
HTMLTSCSS

<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>
OverviewActivitySettings
Overview content.

Features

Controlled / uncontrolled

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

Orientation

orientation: horizontal | vertical. Use slot.tabList / slot.container for vertical layout (e.g. flex-col, grid).

Class hooks

TngTabs: slot.container, slot.tabList, slot.panelContainer. TngTab: slot.tab, slot.active, slot.inactive, slot.disabled.