-
Notifications
You must be signed in to change notification settings - Fork 162
Bottom Nav Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Team Name: CodeX
Developer Name: Diyan Dimitrov
Designer Name
- Peer Developer Name | Date:
- Stefan Ivanov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
Version | Users | Date | Notes |
---|---|---|---|
1 | Names of Developers and Designers | Date |
igx-bottom-nav
component is used to organize or switch between similar data sets. It contains igx-bottom-nav-item
components. The igx-bottom-nav-item
component is a wrapper for igx-bottom-nav-panel
and igx-bottom-nav-header
components that will represent respectively the container for the data and the tab header.
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header label="Tab 1"></igx-bottom-nav-header>
<igx-bottom-nav-panel>
<h1>Tab 1 Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</igx-bottom-nav-panel>
<igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header label="Tab 2"></igx-bottom-nav-header>
<igx-bottom-nav-panel>
<h1>Tab 2 Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</igx-bottom-nav-panel>
<igx-bottom-nav-item>
</igx-bottom-nav>
igx-bottom-nav
should follow the mobile-first approach and should be suitable for hybrid applications.
End-to-end user experience prototype
Must-have before we can consider the feature a sprint candidate
- The bottom-nav should calculate its layout only by itself.
- The developer should be able to determines whether the tab is disabled.
- The developer should be able to customize the tab by icon and label.
- The developer should be able to set random HTML content in a panel.
- The end user should be able to select a tab/panel.
- The tabs and respective panels should synchronize their states: selected/disabled.
- Updates in panels should be indicated on the respective tab as a badge.
Elaborate more on the multi-facetted use cases
Developer stories:
As a developer I want to:
- Story 1: As a developer, I want to add multiple (2-5) tabs/panels in the bottom-nav
- Story 2: As a developer, I want to identify each tab with:
- Label. The 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)
- Story 3: As a developer, I want to have the option to set the currently selected tab item through code.
- Story 4: As a developer, I want to have the option to enable animation of the transition of the panels.
End-user stories:
- Story 1: As an end-user, I want to navigate between the tabs upon tap/click gesture.
- Story 2: As an end-user, I want to track the state of the tab/panel - whether it is selected or updated.
- Story 3: As an end-user, I want to be notified upon tab updates with a badge component.
Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up
3.1. End-User Experience
3.2. 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 bottom-nav should calculate the dimensions by itself.
- Synchronization - It should be able to define states of the tabs:
- selected / deselected,
- enabled / disabled,
- updated / not updated.
- Bottom-nav 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.
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. Keyboard Navigation
Keys | Description |
---|---|
3.5. API
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
selectedIndex |
Gets/sets the index of the selected tab. | number |
||
selectedItem |
Gets the selected tab item component. | IgxTabItemDirective |
||
disableAnimation |
Enables/disables the animation for transition of the contents of the tabs. | boolean |
true |
Name | Description | Cancelable | Parameters |
---|---|---|---|
selectedIndexChange |
Emitted when the selected index changes. | no | index: number |
selectedIndexChanging |
Emitted when the selected index is about to change. | yes | { owner: IgxTabsDirective, cancel: boolean, oldIndex: number, newIndex: number } |
selectedItemChange |
Emitted when the selected tab item changes. | no | { owner: IgxTabsDirective, oldItem: IgxTabItemDirective, newItem: IgxTabItemDirective } |
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
selected |
Gets/sets whether the tab item is selected. | boolean | false |
|
disabled |
Gets/sets whether the tab item is disabled. | boolean | false |
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
icon |
Gets/sets the icon. | string | ||
label |
Gets/sets the text label. | string |
(No public API)
Automation
- Scenario 1:
- scenario 2:
ARIA Support
- Roles:
- Bottom-nav has
tabs
role. - Panel has
tabpanel
role. - Header has
tab
role. - Headers container has
tablist
role.
- Bottom-nav has
- Attributes:
- Include
aria-controls
on the header to link it to its panel. - Include
aria-labelledby
on the panel to link it to its header. - Include
aria-selected
on the header.
- Include
RTL Support
Assumptions | Limitation Notes |
---|---|
Specify all referenced external sources