Banner Specification
igx-banner supports banner component that is shown at the full width of the screen above the app content but below a Navigation Bar if available.
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.
Simpler Layout
More Complex Layout
- 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.
- Banner can contain an informative text message and optionally supplement it using a supporting illustration (icon or image).
- Banner contains at least one and up to two text buttons with the dismissive action placed on the left and the confirming action on the right.
- Buttons are placed under the banner message or on the same line if there is enough room to fit both.
- Banner template can be customized using ng-content
- Banner spans the entire width of the parent element.
- In case a banner appears after a screen loads it animates from the top of the parent element layout pushing the content downwards.
- Banners persist until the user acts on them or dismisses them. Any other user interaction with the app content (button clicking, key navigation, scrolling, form submission, etc.) should not dismiss the banner.
- Proper events are fired on banner dismissal and confirmation
- onOpening and onClosing events are fired on benner opening/closing.
- Will we allow stacking multiple banners or the new banner will automatically dismiss the older one?
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.