Без опису

Jonathan 9b7e7824eb fix: css 'box-sizing' property was causing positioning issues for the close icon 4 роки тому
dist 9b7e7824eb fix: css 'box-sizing' property was causing positioning issues for the close icon 4 роки тому
example 5cd9ce300c fix: showing/hiding was using wrong css 'display' property 4 роки тому
src 9b7e7824eb fix: css 'box-sizing' property was causing positioning issues for the close icon 4 роки тому
.babelrc 37d9c300b9 refactored structure & webpack 6 роки тому
.gitignore 7a5230e223 feat: position top, bottom, left and right 5 роки тому
.npmignore 7a5230e223 feat: position top, bottom, left and right 5 роки тому
LICENCE.md b83424cf45 v2.1.2: security fixes and small bug fix 4 роки тому
README.md 704f737dc6 docs: detailed the various options that can be used 4 роки тому
package-lock.json 56ae14d336 v2.2.3 4 роки тому
package.json 56ae14d336 v2.2.3 4 роки тому
webpack.config.js 12a029fd1b refactor: default timeout of 6 seconds if timeout not specified 4 роки тому

README.md

toasters

Toast alerts/notifications (initially developed for Vue.js with a material-design style)

Installation

npm install --save --production toasters

Usage

HTML:

<div id="toasts-container" class="position-right position-bottom">
  <div id="toasts-content">
    <!-- toasts will be added or removed from here -->
  </div>
</div>

JS:

import Toast from "toasters";

new Toast(options);

// example
new Toast({
  content: "Hello World",
  persistent: true
});

Preview:

preview of visible toast on webpage

Options

Option Type Default Description
content String "" The notification message.
persistent Boolean false Whether or not the toast is persistent.
interactable Boolean true If the toast can be manually closed or not.
timeout Number 6000 How long till the toast disappears. Note: will be ignored if the toast is persistent.

Potential future additions

  • Error handling (i.e. you haven't provided any content for the toast)
  • Ability to parse markdown or html

Contributing

# install dependencies
npm install

# watch files for changes with webpack
npm run dev

# build for production with minification
npm run build