Tabbar Specification (Old)

Overview

igx-tab-bar component is used to organize or switch between similar data sets. It should be wrapper component for igx-tab-panel and igx-tab that will represent respectively the container of the data and the interactable tab.

<igx-tab-bar alignment="bottom">
	<igx-tab-panel label="Tab 1">
		<h1>Tab 1 Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</igx-tab-panel>
	<igx-tab-panel label="Tab 2">
    	<h1>Tab 2 Content</h1>
    	<p>Lorem ipsum dolor sit amet...</p>
	</igx-tab-panel>
</igx-tab-bar>

Objectives

igx-tab-bar should follow the mobile-first approach and should be suitable for hybrid applications. Its igx-tab-panel should be associated with particular igx-tab and the tabbar should synchronize their states. The tabbar definition should be achieved by a minimum code.

User Stories

Developer

As a developer I want to:

• add multiple (2-5) tabs/panels in the tabbar
• identify each Tab with:

• Label. Tab Bar label should fit on a single line. If the text is longer than it wraps to a second line before it’s truncated • Icon • Label and icon (label is one line only)

End user

As a end user, I want to:

• navigate between the Tabs upon tap/click gesture.

• customize the tab through one of the following ways:

• by label

• by icon

• by both

• track the state of the tab/panel. Whether it is selected or updated

• be notified upon Tab updates with a badge component

• navigate between Tabs upon swipe gesture.

Acceptance criteria

1. The tabbar should calculate its layout only by itself.
2. The developer should be able to determine the alignment of the tab list.
3. The developer should be able to determines whether the tab is disabled.
4. The developer should be able to customize the tab by icon and label.
5. The developer should be able to set random HTML content in a panel.
6. The end user should be able to select a tab/panel.
7. The tabs and respective panels should synchronize their states: selected/disabled/updated.
8. Updates in panels should be indicated on the respective tab as a badge.

Functionality

End User Experience

• Navigation \ Swipe gesture - I want to navigate between Tabs upon swipe gesture.

Developer Experience

• It should be able to add multiple (2-5) tabs.
• Layout - each tab's width equals the available width divided by the number of Tabs applied. Developers can define 2 to 5 Tabs. The tabbar should calculate the dimensions by itself.
• Synchronization - It should be able to define states of the tabs:
  • selected / deselected,
  • enabled / disabled,
  • updated / not updated.
• Tabbar should provided its current selected tab and its index.
• Badge placed into tab should display the counter of the changes, happened in relative panel.
• The component should be hidden/shown as the main content is scrolled.
• As a developer I want to automatically scroll to the top of the content on tap on a selected Tab.

API

Properties

• selectedIndex - The index of the selected tab.
• selectedTab - The last selected tab.
• icon - Defines the icon of a tab
• label - Defines the label of a tab

Methods

• Select - Selects tab/panel and make them active/visualized/displayed
• HideOnScroll - Hides the tabbar when the main content is scrolled.

Events

• OnSelect - When tab is selected.
• OnDeselect - When tab is deselected.

ARIA support

• Roles:
  • Tabbar will need tablist role.
  • Panel content area will need the tabpanel role.
  • Tabs will need the tab role.
• Attributes:
  • Include aria-controls to link each tab to its tabpanel.
  • Maintain aria-selected state between tabs and tab contents.