Components.Alert public

Implements Bootstrap alerts


By default it is a user dismissible alert with a fade out animation, both of which can be disabled. Be sure to set the type property for proper styling.

<BsAlert @type="success">
  <strong>Well done!</strong> You successfully read this important alert message.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.



Call to hide the alert. If the fade property is true, this will fade out the alert before being finally dismissed.



Call to make the alert visible again after it has been hidden

_visible unknown private

alert boolean private

Computed property to set the alert class to the component div. Will be false when dismissed to have the component div (which cannot be removed form DOM by the component itself) without any markup.

dismissible boolean public

Default: true

Defined in addon/components/bs-alert.js:39

A dismissible alert will have a close button in the upper right corner, that the user can click to dismiss the alert.

fade boolean public

Default: true

Defined in addon/components/bs-alert.js:92

Set to false to disable the fade out animation when hiding the alert.

fadeDuration number public

Default: 150

Defined in addon/components/bs-alert.js:117

The duration of the fade out animation

hidden boolean private

Default: false

Defined in addon/components/bs-alert.js:51

If true the alert is completely hidden. Will be set when the fade animation has finished.

notVisible unknown private

type String public

Default: 'default'

Defined in addon/components/bs-alert.js:128

Property for type styling

For the available types see the Bootstrap docs

usesTransition boolean private

Use CSS transitions?

visible boolean public

Default: true

Defined in addon/components/bs-alert.js:63

This property controls if the alert should be visible. If false it might still be in the DOM until the fade animation has completed.

When the alert is dismissed by user interaction this property will not update by using two-way bindings in order to follow DDAU best practices. If you want to react to such changes, subscribe to the onDismiss action



The action is called when the close button is clicked.

You can return false to prevent closing the alert automatically, and do that in your action by setting visible to false.



The action to be sent after the alert has been dismissed (including the CSS transition).