Banner Specification
igx-banner supports banner component that is shown at the full width of the screen above or below the app content.
Provide means for developers to implement a mechanism that is less transient than a Snackbar and less obtrusive than a Dialog to display context-specific information with minimal efforts.
- As a developer, I want to be able to add a Banner to my application, so that I can inform or “ask” the end user.
- As a developer, I want to add a message to the Banner, so that I clarify my Banner better for the end user.
- As a developer, I want to have at least one button, so that I can enable the end user confirm that he had been notified.
- As a developer, I want to add second button, so that I can enable the end user make a choice.
- As a developer, I want to customize the Banner template using ng-content, so that I would provide the end user with a custom Banner that suits the functions of the app. (various height, add more content, add inputs, checkboxes, radio button and etc)
- As an end user, I want to get informed about events that are not critical in a less obtrusive way.
- As an end user, I want to get message in the Banner, so that I read more details and have a better understanding of my current situation.
- As an end user, I want to get an Icon that help me understand better the message shown.
- As an end user, I want to be able to take actions that are relevant to the information that is displayed.
##Acceptance criteria
- As a developer I can add a Banner to the application.
- As a developer I can add a message to the Banner.
- As a developer I can add an optional Avatar with icon to the Banner.
- As a developer I can add one button to the Banner.
- As a developer I can add a second button to the Banner.
- As a developer I can customize the Banner content as I see fit.
- As a developer I can assign events to actions occurring on the Banner.
- The end user sees the Banner inline with other app content and may ignore it or dismiss it.
- The end user could interact with the Banner through the actions triggered by the provided action buttons.
- The citizen developer has all ARIA tags that apply.
The Banner must follow the material design guidelines, i.e. less transient information container that the Snackbar and less obtrusive than a Dialog, which pushes the rest of the application interface as it appears from the bottom or the top. The Banner appears to be inlined with the rest of the content and lies on the same plain as the main app content (no elevation is ever applied).
The end user interface consists of:
- Content - the Banner content is typically a text paragraph and optionally an icon avatar may precede it. However, the content presents a template where custom layouts can be accomplished too.
- Actions - Banners present a focused and limited set of actions, which are generally affirmative or dismissive, but may also be specific to the content message
The modal control can be dismissed by swiping the component it is attached to in the direction of the Banner e.g. when a Banner appears above a List component and pushes it down, when the list is scrolled downwards, the Banner will disappear and the list will snap to take the space that has been freed up.