Flash Messages

Available Sass Variables and default values

$flash-offset-left: 220px
$flash-offset-top: $navigation-top-height
$flash-z-index: 5000
$flash-margin: 30px
$flash-padding: 20px
$flash-text-align: left

$flash-border-radius: $base-border-radius

$flash-info-color: darken($info-color, 50%)
$flash-danger-color: darken($danger-color, 50%)
$flash-success-color: darken($success-color, 50%)
$flash-warning-color: darken($warning-color, 50%)

$flash-info-border: 1px solid darken($info-color, 50%)
$flash-danger-border: 1px solid darken($danger-color, 50%)
$flash-success-border: 1px solid darken($success-color, 50%)
$flash-warning-border: 1px solid darken($warning-color, 50%)

Examples

Flashes from Controller

Nothing needs to be done for default flash messages. A dismissible flash will be displayed across the top of the content area if the controller provides one.

There are four types of flash messages: success, info, warning, danger

To send a success flash message, use the following in the controller:

flash.now[:notice] = "Text goes here."

To send an error flash message, use the following in the controller:

flash.now[:error] = "Error text goes here."

Auto-hide flash message

From a controller, modify the markup to the following:

flash.now[:notice] = { text: "Text goes here", duration: 5000 }

Javascript API

Flash messages can be created with javascript. gaudi.flash() accepts three parameters: message, type, duration. Type and duration are both optional, with defaults info and 3000

Create a flash message using javascript with the following code:

gaudi.flash("Text goes here")

To change the type of flash message, pass in a second parameter:

gaudi.flash("Text goes here", "success")

To change the auto-hide duration, pass in a third parameter (in milliseconds):

gaudi.flash("Text goes here", "success", 5000)

If the duration is set to 0, the alert will not auto-close.

gaudi.flash("Text goes here", "success", 0)
Info Alert

Success Alert

Danger Alert

Warning Alert

Success, no auto-close