prism-announce
Web component based on Polymer 2. Provide a message display container with material design.
[ This description is mirrored from README.md at github.com/Prhythm/prism-announce on 2019-05-10 ]
<prism-announce>
<prism-announce>
is a Polymer 2 element provides simple yet fully customisable notifications.
Usage
Place <prism-announce>
in your application, and design how content message appears. Use <prism-announce-toast>
and <prism-announce-notification>
for toast and notification in material desgin.
<prism-announce top right>
<template>
<style>
.notification {
background-color: #cfcfcf;
border: 1px solid grey;
padding: 7px;
margin: 5px;
display: flex;
justify-content: space-between;
}
</style>
<div class="notification">
<span>Hello [[name]] at [[postTime]]</span>
<button on-click="closeMessage">Close</button>
</div>
</template>
</prism-announce>
To announce a message, simply fire an announce
event and assign content as a detail object.
element.dispatchEvent(new CustomEvent('announce', {
bubbles: true,
composed: true,
detail: {
name: this.name,
postTime: new Date().toLocaleString()
}
}))
Styling
<prism-announce>
provides the following custom properties and mixins for styling:
Custom property | Description | Default |
---|---|---|
--var-prism-announce |
Mixin applied to the element | {} |
Licence
MIT Licence
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer#^2.0.0
- Released
- 2017-07-20
- Maturity
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
prism-announce - Vaadin Add-on Directory
Web component based on Polymer 2. Provide a message display container with material design.Documentation
View on GitHub
GitHub Homepage
Issue tracker
License
prism-announce version 2.0.0
### Dependencies
Polymer/polymer#^2.0.0