<global-alert-wrapper>
Event-driven, Bootstrap-like alert messages
Installation
Install the component using Bower:
$ bower install --save roberttaraya/global-alert-wrapper
Usage
Wrap your main component
<global-alert-wrapper>
<your-cool-app></your-cool-app>
</global-alert-wrapper>
Or wrap the contents of your main component
<dom-module id="your-cool-app">
<template>
<div class="container">
<global-alert-wrapper>
...your code here...
</global-alert-wrapper>
</div>
</template>
</dom-module>
Show Event
show-alert-message
: this event shows the alert message. Requires a type.
Allowed values for type
:
success
, info
, warning
, and danger
Basic Alerts
this.fire("show-alert-message", {
type: "info",
message: "Your campaign has been saved as a draft."
});
If you're using a basic alert message, you'll have to fire a close event to close it.
Close Event
close-alert-message
: this message closes (hides) the alert message
this.fire("close-alert-message");
Auto Dismissible Alerts
this.fire("show-alert-message", {
type: "success",
message: "Email sent.",
timeout: 3000
});
Dismissible Alerts
this.fire("show-alert-message", {
type: "info",
message: "Your campaign has been saved as a draft.",
dismissible: true
});
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D