Tabs Specification

Jump to bottom

Stanka Bozalieva 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: 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.
customize each tab with label, icon, both.
have the option to set the currently selected tab item through code.
be able to choose between 2 types of tabs:

fixed size. All tabs are equal size and fit the width of the tabs group.
content fit. The size of the tab depends on the tab-item content (label, icon, both) and all tabs have equal padding.

to have two options when the tabs overflow of their container:

have scrollable tabs.
have a dropdown icon that shows the hidden content.

End user: As an end user, I want to:

navigate between the tabs upon click.
navigate between the invisible tabs using scroll when there are many tabs that don't fit the parent container.
have customized tabs with label, icon or both.

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views

Height

48dp

Alignment

Centered or aligned with left keyline

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`	Set an icon of a tab.
`label`	Set the label of a tab.
`isDisabled`	Set if the tab is enabled/disabled.

Methods

Name	Description	Return type	Parameters
`select`	Selects tab and its content.

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