Directory

← Back

prism-announce

Web component based on Polymer 2. Provide a message display container with material design.

Author

Rating

Popularity

<100

[ 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> &nbsp;
            <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

Compatibility

(Loading compatibility data...)

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. prism-announce - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Prhythm/prism-announce](https://github.com//Prhythm/prism-announce/blob/2.0.0/README.md) on 2019-05-10 ]** # \ `` is a [Polymer 2](http://polymer-project.org/) element provides simple yet fully customisable notifications. # Usage Place `` in your application, and design how content message appears. Use `` and `` for toast and notification in material desgin. ```html ``` To announce a message, simply fire an `announce` event and assign content as a detail object. ```javascript element.dispatchEvent(new CustomEvent('announce', { bubbles: true, composed: true, detail: { name: this.name, postTime: new Date().toLocaleString() } })) ``` # Styling `` provides the following custom properties and mixins for styling: Custom property | Description | Default ----------------|-------------|---------- `--var-prism-announce` | Mixin applied to the element | `{}` # Licence MIT Licence
Online Demo
Documentation
View on GitHub
GitHub Homepage
Issue tracker
License

prism-announce version 2.0.0
### Dependencies Polymer/polymer#^2.0.0

Online