averouiComponent playgroundv0.0.1
Components / Panel /Tabs

Tabs

New

Organize related content into focused views, one tab at a time.

Controlled stateLazy contentKeyboard accessible

Basic and controlled

Use custom headers and dynamic panels. The buttons below also control the active tab.

YOUR WORKSPACE

A place for every idea

Keep your project details, team and activity together. Switch tabs to explore your workspace.

Active tab: overview

Scrollable

Keep a long list in one row. Use the arrows, touch scrolling or keyboard navigation.

January report

Review your team's progress and plan the next milestone.

Lazy content

Open Draft to create the editor. Your text stays intact when switching tabs.

Keep expensive content deferred until it is needed.

Usage and API

Import AvTabs, AvTabList, AvTab, AvTabPanels and AvTabPanel from avero-ui.

HTML
<av-tabs inputId="workspace" [(value)]="active">
  <av-tab-list ariaLabel="Workspace">
    <av-tab value="overview">Overview</av-tab>
    <av-tab value="settings">Settings</av-tab>
  </av-tab-list>
  <av-tab-panels>
    <av-tab-panel value="overview">Project overview</av-tab-panel>
    <av-tab-panel value="settings" lazy>
      <ng-template #content>
        <input avInput aria-label="Project name" />
      </ng-template>
    </av-tab-panel>
  </av-tab-panels>
</av-tabs>
State. Provide a unique inputId and an initial value. Match each tab and panel with a unique string or number. Bind [(value)] to synchronize selection. External changes remain possible when disabled.
Options. scrollable adds navigation buttons. disabled on AvTab or AvTabs blocks interaction. lazy on AvTabs or AvTabPanel defers an ng-template #content until first activation and preserves it afterward. Plain projected content is created immediately.
Keyboard. Left/Right wrap between enabled tabs; Home/End move to the first/last. Enter/Space activate. selectOnFocus also activates while moving focus. Give AvTabList an ariaLabel and keep header content presentational.
Avero UI Designed to fit your application.