Skip to content

Navigation Bar Specification

Tacho Zhelev edited this page Nov 21, 2018 · 5 revisions

Navigation Bar Specification

Contents

  1. Overview
  2. User Stories
  3. API
  4. Test Scenarios
  5. Accessibility

1. Overview

A navigation bar is used to facilitate parent-child like navigational patterns within an app. A nav bar is placed above the content in a header/toolbar.

<igx-navbar [title]="currentView" actionButtonIcon="arrow_back" [isActionButtonVisible]="canGoBack()"
     (onAction)="navigateBack()">
</igx-navbar>

Goals:

  • Minimal API, focused on providing maximum flexibility for common use cases
  • Mobile only approach
  • Hybrid

2. User Stories

Critical developer stories

  • Define a page: As a citizen developer I want to define a page element.

  • Define a hierarchy: As a citizen developer I want to define a root page.

  • Back Button: As a citizen developer I want to add a Back Button icon to a nav bar. Back button pushes the previous page on the navigational stack and it is left aligned by default.

Android

Arrow image

Ex.g.

Fun times image

iOS

Back icon and the title of the previous page or just "Back".

Back image

Ex.g.

Choose services image

Important developer stories

  • Title: As a citizen developer I want to add a Title to a Navigational bar.

Android

Next to the Back Button, left Aligned to the bar.

Ex.g.

Fun times image

iOS Centered to the bar.

Ex.g.

Choose services image
  • Action Icons: As a citizen developer I want to add an unlimited number of icons alighned on the right side of the bar by default.

  • On Scroll: As a developer I want to hide/show the component as the main content is scrolled.

  • Search: As a citizen developer I want to add a search option located in a navigation bar. (more detalis in Search API)

Android Back button disables Search

Eg.x.

ada image

iOS Cancel disables back button, acts like a Back Button

Ex.g.

Search photos image

  • Custom Action Nav icon: As a citizen developer I want to be able to define a custom action nav icon instead of using the default one.

Nice-to-have developer stories

  • Gestures: As a citizen developer I want to define gestures to navigate back to the previous page.

Critical User Stories

  • Back Button: As an user I want to be able to navigate back to my previous page with a back button.

Important User Stories

  • Title: As an user I want to know the status of the system.

  • Action Buttons: As an user I want to apply actions on content of the view.

  • On Scroll: As an user I want to hide/show the navigation bar as I scroll the main content.

  • Search: As an user I want to search thru my content.

Nice-to-Have User Stories

  • Gestures: As an user I want to navigate to me previous page with the help of gestures

3. API

IgxNavbarComponent Properties

Name Type Description
id string An input property that sets the value of the id attribute. If not provided it will be automatically generated.
isActionButtonVisible boolean Specify whether the IgxNavbarComponent default action button should be visible.
actionButtonIcon string An input property that sets the default icon of the IgxNavbarComponent.
title string An input property that sets the title of the IgxNavbarComponent.
titleId string An input property that sets the titleId of the IgxNavbarComponent. If not set it will be automatically generated.

IgxNavbarComponent Events

Name Description
onAction The event that will be thrown when the action of the default icon is executed. (Provides a reference to the IgxNavbar component as an argument)

4. Test Scenarios

Automation

  • Should properly initialize properties
  • Should change properties' default values
  • Should trigger on action event
  • Should have default action icon when user has not provided one
  • Should have custom action icon/content when user has provided one

5. Accessibility/Internationalization

The IgxNavbar component has a role of navigation.

Clone this wiki locally
You can’t perform that action at this time.