@talenra/components documentation
  1. Components
  2. TabComponent

File

tabs/src/tab/tab.component.ts

Description

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

A selectable Tab in a TabList.

Tab represents an individual tab control within a TabList. It requires an identifier that uniquely identifies it and links it to a corresponding TabPanel. Additionally it requires a label that is displayed on the tab.

Optionally you can provide an icon name. If an icon is provided, the label will be visually hidden but used as tooltip text. Please refer to the documentation of @talenra/icons for a list of available icons.

Tab supports a counter badge that can display a number. If the counter exceeds a specified maximum value, it will display as '+' (e.g. '99+').

Further Documentation

  • TabsComponent – The overarching container for a tabbed interface

Import

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

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

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives Tab
 Inputs : value: identifier disabled 
host {
}
selector talenra-tab
imports BadgeComponent IconComponent TooltipDirective
templateUrl ./tab.component.html
styleUrl ./tab.component.scss

Index

Properties
Inputs

Inputs

counter
Type : number, unknown
Default value : 0, { transform: numberAttribute }

Number displayed in a badge.

Example :
<talenra-tab ... counter="5" />
counterMax
Type : number | undefined, unknown
Default value : undefined, { transform: numberAttribute }

Maximum value displayed in the badge. If the counter exceeds this value, it will display as '+' (e.g. '99+').

Example :
<talenra-tab ... counterMax="10" />
icon
Type : string
Default value : ''

Name of the icon to display on the Tab. If provided, the icon will be shown instead of the label text.

Example :
<talenra-tab ... icon="person" />
label
Type : string
Required :  true

Label displayed on the Tab. If an icon is provided, the label is visually hidden but used as tooltip text.

Example :
<talenra-tab ... label="My Label" />
labelHidden
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the label is visually hidden. Requires an icon to be provided to take effect.

Example :
<talenra-tab ... icon="person" labelHidden />

Properties

Public Readonly disabled
Type : unknown
Default value : this.tab.disabled

Determines whether the tab is disabled. Disabled Tabs are not interactive and have a disabled appearance.

Example :
<talenra-tab ... disabled />
Public Readonly identifier
Type : unknown
Default value : this.tab.value

Unique identifier. Used to associate the Tab with its corresponding TabPanel.

Example :
<talenra-tab ... identifier="myTab" />

results matching ""

    No results matching ""