-
Notifications
You must be signed in to change notification settings - Fork 162
Tabs Specification
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>
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.
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 using
type
:- 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
- 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.1. End User Experience
Scrollable Tabs: As the tab items overflow the tabs container, a designated area appears at the start and at the end of the tabs container. The occucance visually pushes the first tab thus causing a "jump" in case of resizing. The area at the start is empty, and at the end it has an arrow pointing to the end. After a scroll the first area is populated with an arrow pointing at the start.
In case of a selection of a partially visible tabs item, the tabs pre-scroll so that the later is seen fully visible.
The scroll's range is done in pixels.
DropDown Menu:
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. Keyboard navigation
KEY | Description |
---|---|
LEFT ARROW | Move focus to previous tab |
RIGHT ARROW | Move focus to next tab |
TAB | Move focus to the next tab |
TAB + SHIFT | Move focus to the previous tab |
HOME | Move focus to first tab |
END | Move focus to last tab |
SPACE or ENTER | Switch to focused tab |
3.4. API
Options
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
selectedIndex |
The index of the selected tab. | number | ||
selectedTab |
The last selected tab. | IgxTabItemComponent | ||
icon |
Set an icon of a tab. | string | ||
label |
Set the label of a tab. | string | ||
isDisabled |
Set if the tab is enabled/disabled. | boolean | ||
tabsType |
Set the tab item sizing mode. By default, the sizing type is fixed and all tabs have equal size to fit the view port. When contentfit is set, the tab item width is sized to its content in the range of min/max width. |
TabsType |
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. |
- Roles:
- Tabs has
tabs
role. - Panel content area has
tabspanel
role. - Tabs has
tabitem
role.
- Tabs has
- Attributes:
- Include
aria-controls
to link each tab to its content. - Maintain
aria-selected
state between tab item and tab item content.
- Include