@talenra/components documentation
  1. Components
  2. TabListComponent

File

tabs/src/tab-list/tab-list.component.ts

Description

Developer Preview – This component is in an early stage of development and may undergo breaking changes. Feedback welcome!

Tab List component acts as a container for multiple Tab components. It manages the selection and focus of the tabs. Its selected input (supports two-way binding) is used to control which tab is currently selected. If not provided, the first enabled tab will be selected by default.

Further Documentation

  • TabsComponent – The overarching container for a tabbed interface

Import

Example :
import { TabListComponent } from '@talenra/components/tabs';

../../../#/tabs

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives TabList
selector talenra-tab-list
templateUrl ./tab-list.component.html
styleUrl ./tab-list.component.scss

Index

Inputs
Outputs

Inputs

selected
Type : string | undefined
Default value : undefined

Identifier of the currently selected tab. Supports two-way binding. If not provided, the first enabled tab will be selected by default.

Example :
protected readonly selectedTab = signal<string | undefined>(undefined);
Example :
<talenra-tab-list selected="myTab">...</talenra-tab-list>
<talenra-tab-list [(selected)]="selectedTab">...</talenra-tab-list>
size
Type : TTabListSize
Default value : TabListSize.M

Determines the size of the Tab List's child Tabs.

Example :
<talenra-tab-list size="s">...</talenra-tab-list>
tabWidth
Type : TTabWidth
Default value : TabWidth.Strict

Determines how the Tab List's child Tabs are sized. In strict mode, all child Tabs (except for the selected one) will be of the same width – regardless of their content. Overflowing content will be truncated with an ellipsis.

If there's sufficient horizontal space, Dynamic mode will behave same as Strict. In cases where labels take more horizontal space than available, Dynamic mode will take the content of the Tabs into account and size them accordingly. This means that some Tabs may be wider than others, and the selected Tab may be less wide than an unselected one.

Example :
<talenra-tab-list tabWidth="dynamic">...</talenra-tab-list>

Outputs

selected
Type : string | undefined

Identifier of the currently selected tab. Supports two-way binding. If not provided, the first enabled tab will be selected by default.

Example :
protected readonly selectedTab = signal<string | undefined>(undefined);
Example :
<talenra-tab-list selected="myTab">...</talenra-tab-list>
<talenra-tab-list [(selected)]="selectedTab">...</talenra-tab-list>

results matching ""

    No results matching ""