Components / Tabs

Tabs

Layered panels with controlled selection, orientation and keyboard activation.

Key metrics and recent project activity.

example.component.html

html

<aevko-tabs label="Project views" [(value)]="view">
  <aevko-tabs-list>
    <button aevkoTabsTrigger value="overview">
      Overview
    </button>
    <button aevkoTabsTrigger value="activity">
      Activity
    </button>
  </aevko-tabs-list>
  <aevko-tabs-content value="overview">
    Project summary
  </aevko-tabs-content>
  <aevko-tabs-content value="activity">
    Recent activity
  </aevko-tabs-content>
</aevko-tabs>

Installation

npx aevko-ui@latest add tabs --yes

Source ownership

Customization

Compose only the triggers and panels needed, bind value for controlled navigation and choose manual activation when changing tabs is expensive.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible name for the tab list.
`id`	`string`	`'aevko-tabs'`	Prefix linking triggers and panels; make it unique per page.
`value`	`model<string>`	`first trigger`	Controlled selected tab value.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout and arrow-key axis.
`activation`	`'automatic' \| 'manual'`	`'automatic'`	Whether focus immediately selects a tab.
`trigger / content value`	`string`	`required`	Stable association key.

Accessibility contract

Accessibility

Included behavior

Triggers and panels are linked by ids; arrows, Home and End move focus while automatic or manual activation stays explicit.

Your responsibility

Give every tabs instance a unique id, use concise trigger labels and keep panels focused on one related view.

Back to all components