Skip to content
simple website notification
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
test
.gitignore
.travis.yml
Gruntfile.js
README.md
bower.json
package-lock.json
package.json

README.md

cheers-alert

simple website notification

Build Status Coverage Status Code Climate

Demo Animation

Demo Page

Install

NPM

$ npm install cheers-alert --save

Bower

$ bower install cheers-alert --save

Usage

import cheers from 'cheers-alert';
import 'cheers-alert/src/cheers-alert.css'; //load style
import 'font-awesome/css/font-awesome.min.css'; //load font-awesome

cheers.success({
    title: 'Warning',
    message: 'Validation error',
    alert: 'slideleft',
    icon: 'fa-user',
    duration: 3,
    callback: () => {}
});

Properties

  • title - [String] header(optional).
  • message - [String] message or content(required).
  • alert - [String] transition of notification(defaults to fadein).
  • icon - [String] uses font awesome(optional).
  • duration - [Number] transition duration(defaults to 4) in seconds.
  • callback - [Function] callback function triggered onClick.

Notification Types

  • success
  • warning
  • error
  • info

Alert Types

  • slideleft
  • fadein

Configuring .duration

set the .duration one-time to avoid redundancy. minimum of 2(seconds).

cheers.setDuration(10); //sets all notification's transition.

Disable close onClick

set to false to prevent closing onClick.

cheers.setToggle(false); //defaults to true when not set.

Disable stacking

set false to disable stacking of notifications.

cheers.setStacking(false); //defaults to true when not set.

Customize CSS

overide this class to modify styles.

<div class="cheer-holder success">  <!-- success, error, warning or info  -->
    <div class="cheers-icon"></div>
    <div class="cheers-body">
        <div class="cheers-title"></div>
    </div>
</div>
You can’t perform that action at this time.