Demo

b-flash-message

A flash message (or notification) element with four different levels.

Usage

<b-flash-message visible="true" type="info" duration="2000">
    <strong>Hello, World!</strong> Foo Bar
    <button flash-message-dismiss>x</button>
</b-flash-message>

Will display an info flash message during 2 secs containing the string "Hello, World! Foo Bar". You can make it dismissable without any JS by adding a flash-message-dismiss or data-flash-message-dismiss attribute to any link or button inside the dialog content.

API

Attributes

  • visible: controls the display of the message. Valid values are true or false. By default it is set to false.
  • type: four possible values: info, success, warning and error, respectively blue, green, yellow and red. By default this attribute is set to info. -duration: Trigger a timeout when the message is displayed (see show accessor). Valid value is a number given in milliseconds.

Methods

  • show(): displays the flash message. If the attribute duration is set to a valid value, the message will be hidden automatically after specified number of milliseconds.
  • close(): hides the flash message.

Events

  • b-flash-message-show: will fire when the flash message is shown.
  • b-flash-message-close: will fire when the flash message is closed.