File

tabs/src/tabs/tabs.component.ts

Description

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

The Tabs component represents a set of layered sections of content, acting as the overarching container for a tabbed interface.

Features

• Auto select first enabled Tab if selected is not provided
• Height animation when switching Tabs, no animation when content height changes to prevent issues with dynamic content height.
• Disable/enable individual tabs
• Handling width calulation
• Support for label (text) and/or icon (label is used for Tooltip if icon is provided)
• Truncate long text (Tooltip)
• Support for an optional counter value (Badge)
• Keyboard navigation
• Highlight for hover, focus and selected state

Usage Examples

Basic Usage

<talenra-tabs>
  <talenra-tab-list selected="myTab">
    <talenra-tab identifier="myTab" label="My Tab" />
    <talenra-tab identifier="yourTab" label="Your Tab" />
    <talenra-tab identifier="theirTab" label="Their Tab" />
  </talenra-tab-list>
 <talenra-tab-panels>
   <talenra-tab-panel identifier="myTab">My Tab Content</talenra-tab-panel>
   <talenra-tab-panel identifier="yourTab">Your Tab Content</talenra-tab-panel>
   <talenra-tab-panel identifier="theirTab">Their Tab Content</talenra-tab-panel>
 </talenra-tab-panels>
</talenra-tabs>

With Icons and Badges

<talenra-tabs>
  <talenra-tab-list selected="inbox">
    <talenra-tab identifier="inbox" label="Inbox" icon="mail" counter="5" />
    <talenra-tab identifier="drafts" label="Drafts" icon="draft" counter="2" />
    <talenra-tab identifier="sent" label="Sent" icon="send" disabled />
  </talenra-tab-list>
  <talenra-tab-panels>
    <!-- Tab panels content -->
  </talenra-tab-panels>
</talenra-tabs>

Import

import { TabsComponent } from '@talenra/components/tabs';

Further Documentation

• TabComponent – The individual tab control within a TabList
• TabListComponent – The container for Tab components
• TabPanelComponent – The content panel associated with a Tab
• TabPanelsComponent – The container for TabPanel components

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