Skip to content

Latest commit

 

History

History
118 lines (91 loc) · 3.83 KB

examples.md

File metadata and controls

118 lines (91 loc) · 3.83 KB
Raw

Examples examples

Success Example

DashBanner.View.showSuccess("Some Success Message")
DashBanner.View.flashSuccess("Some Success Message")

flashSuccess automatically closes the Banner after 3 sec

Error Example

DashBanner.View.showError("Some Error Message")
DashBanner.View.flashError("Some Error Message")

flashError automatically closes the Banner after 3 sec

Action Example

DashBanner.View.showAction("Some Action Message", "custom-status")
DashBanner.View.flashAction("Some Action Message", "custom-status")

flashaction automatically closes the Banner after 3 sec showAction can also be used to attach the Banner to a custom container:

DashBanner.View.showAction("Some Action Message", "custom-status", $('.custom-container'))

When used in this way the custom container must also be passed to closeBanner:

DashBanner.View.closeBanner($('.custom-container'))

Closing the Banner

When using showSuccess, showError, or showAction the Banner must be manually closed

DashBanner.View.closeBanner()

When showAction is given a custom container, the custom container must also be passed to closeBanner

DashBanner.View.showAction("Some Action Message", "custom-status", $('.custom-container'))
DashBanner.View.closeBanner($('.custom-container'))

Banner CSS Classes

Multiple classes can be called by the CSS supplied within this component. They are as follows:

Banner General

.dash-banner-container
This class is required as the initial wrapper.
.dash-banner
This activates the initial banner, alone it will provide a generic banner with a gray background.
.dash-banner--undefined
A gray background by default, this class is meant to be overwritten to any color needed. apply this after .dash-banner has been applied.

Banner Colors

.dash-banner--error, .dash-banner--red
The typical dash red as a banner background.
.dash-banner--success, .dash-banner--green
The typical dash green as a banner background.
.dash-banner--blue
The typical dash blue as a banner background.
.dash-banner--gray, .dash-banner--grey
The typical dash gray/grey as a banner background.
.dash-banner--orange
The typical dash orange as a banner background.
.dash-banner--purple
The typical dash purple as a banner background.

Banner Other

.dash-banner--close
This displays the close icon on a banner, currently this functionality is not enabled by any banner
.dash-banner--icon
The size, color, and alignment of the icons displayed by the banner
.dash-banner--title
The size, color, and alignment of the text displayed by the banner
.dash-banner--row
This class provides a simple fix to the normal dash "row" class to prevent overflow within banners. This class should only be added to the "row" containing element for the banner
.dashing-icon--undefined
An icon to be overwritten, displays alert-filled by default

Banner Example

<div data-id="dash-banner-container">
	<div>
		<div data-id="dash-banner" class="dash-banner dash-banner--error">
  			<div class="row dash-banner--row">
    		<i data-id="banner-icon" class="dashing-icon dashing-icon--white dash-banner--icon dashing-icon--alert-filled"></i>
    		<h3 class="dash-banner--title" data-id="banner-message">Some Error Message 216079393</h3>
    		<div class="dash-banner--close button button--transparent button--icon button--icon--small hidden" data-id="banner-close">
    			<i class="dashing-icon dashing-icon--close dashing-icon--white"></i>
    		</div>
  		</div>
	</div>
</div>