Tabs Specification

Jump to bottom

Svetla Boykova edited this page Mar 23, 2018 · 28 revisions

Tabs Specification

Contents

Overview
User Stories
Functionality
ARIA support
References

1. Overview

igx-tabs component is used to organize or switch between similar data sets. It should be a wrapper component for igx-tab-item and igx-tabs-group that will represent respectively the container for the data and the tab header. Tabs component places the tabs at the top and allows scrolling when there are multiple tab items.

Tabs are ordered in a single row above their associated content.

<igx-tabs>
	<igx-tabs-group label="Tab 1">
		<h1>Tab 1 Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</igx-tabs-group>
	<igx-tabs-group label="Tab 2">
    	<h1>Tab 2 Content</h1>
    	<p>Lorem ipsum dolor sit amet...</p>
	</igx-tabs-group>
</igx-tabs>

Objectives

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

2. User Stories

Developer:

Story 1: As a citizen developer, I want to display multiple tabs items with their associate groups in a tabs component and scroll them if they don't fit in.
Story 2: As a citizen developer, I want to customize each tab with label, icon, both.
Story 3: As a citizen developer, I want to have the option to set the currently selected tab item through code

End user:

Story 1: As an end user, I want to navigate between the tabs upon click.
Story 2: As an end user, I want to navigate between the invisible tabs using scroll when there are many tabs that don't fit the parent container.
Story 3: As an end user, I want to have customized tabs with label, icon or both.

Acceptance criteria

The tabs component should calculate its layout based on the Material guidelines.
The tabs should be scrollable in the container through buttons, or "More" tab should be provided to list the not visible tabs and possibility to select specific tab.
The developer should be able to determine whether the tab item is disabled.
The developer should be able to customize the tab item by icon and label or custom template.
The developer should be able to set random HTML content in a group.
The developer should be able to specify explicitly the selected tab item through code.
The end user should be able to select a tab item/group.
The tabs and their content should synchronize their states: selected/disabled.

3. Functionality

3.1. End User Experience

User should have top tabs navigation that is not limited to 3-4 tabs and can scroll when there are many tabs.

3.2. Developer Experience

The developer should be able to add multiple tab items.
The developer should be able to specify the mechanism for tab positioning (fixed, content fit).
The developer should be able to set enable/disable state to tabs items.
Tabs component should provided its current selected tab item and its index.

3.3. Navigation

Navigation between tab items (if needed) would be done by using scroll buttons or "More" items option.

3.6. API

Options

Name	Description	Type	Default value	Valid values
`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.
`isDisabled`	Defines if the tab is enabled/disabled.

Methods

Name	Description	Return type	Parameters
`select`	Selects tab/content and make them active/visualized/displayed

Events

Name	Description	Cancelable	Parameters
`onTabItemSelected`	Emitted when the tab item is selected.
`onTabItemDeselected`	Emitted when the tab item is deselected.

4. ARIA Support

Roles:
- Tabs has tabs role.
- Panel content area has tabspanel role.
- Tabs has tabitem role.
Attributes:
- Include aria-controls to link each tab to its content.
- Maintain aria-selected state between tab item and tab item content.

6. References