-
Notifications
You must be signed in to change notification settings - Fork 162
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.
- 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 if needed.
- 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 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 button with the dismissive action.
- Buttons are placed under the banner message or on the same line if there is enough room to fit both.
- 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.
- Banner persists until the user acts on it or dismisses it. Any other user interaction with the app content (button clicking, key navigation, scrolling, form submission, etc.) should not dismiss the banner.
- Banner dismissal/confirmation calls open()/close() method, triggers proper events and hides the banner
- onOpening and onClosing events are fired on banner opening/closing.
- onOpened and onClosed events are fired when banner has been opened/closed.
- onOpening and onClosing events are cancelable, which prevents banner from opening/closing .
- In case multiple banners are opened each banner pops up not affecting the others.
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
You should be able to configureigx-banner
by using next properties:
-
collapsed
- Gets whetherigx-banner
is collapsed
You can also use next methods to interact with the igx-banner
:
-
open
- Opens theigx-banner
-
close
- Closes theigx-banner
-
toggle
- Toggles theigx-banner
While using igx-banner
you can listen to next events:
-
onOpening
- Fires before theigx-banner
shows up -
onOpened
- Fires after theigx-banner
shows up -
onClosing
- Fires before theigx-banner
hides -
onClosed
- Fires after theigx-banner
hides