Giter VIP home page Giter VIP logo

angular-notify's Introduction

angular-notify

demo: http://cheiron1990.github.io/angular-notify/demo.html

使用说明

1 引入样式表,墙内自己解决一下Google字体 -_-||| ,第二个是根据不同的主题,可以是angular-notify-texture, angular-notify-material, angular-notify-flat, angular-notify-bordered:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/css/angular-notify-texture.min.css" id="notifyTheme">

2 在jQuery和Angular之后引入js文件:

<script src="scripts/dist/angular-notify.min.js"></script>

3 在你的Angular App中引入模块:

angular.module('yourApp', ['angularNotify']);

4 在HTML中添加通知容器:

<div notifybar style="position:absolute;top:0;right:0"></div>

5 需要显示通知时触发事件,传入一个对象,包括type ( 可选的值:'success', 'info', 'warning', 'error' ), title 和可选的content:

var notify = {
    type: 'success',
    title: 'Create Item Successful!',
    content: 'Item ( id: 2031 ) has already added to the list.',
    timeout: 3200 //timeout default is 3200 ms you can change as you need
};
$scope.$emit('notify', notify);

Guide

1 Import stylesheets. The different theme files are angular-notify-texture, angular-notify-material, angular-notify-flat and angular-notify-bordered:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/css/angular-notify-texture.min.css" id="notifyTheme">

2 Import the js file after jQuery and AngularJS: 

<script src="scripts/dist/angular-notify.min.js"></script>

3 Import the module in your Angular App:

angular.module('yourApp', ['angularNotify']);

4 Add a container into the html file:

<div notifybar style="position:absolute;top:0;right:0"></div>

5 When you want to display a notify, trigger a notify event, and pass an object as argument, this object should contain a type parameter(the value must be one of: 'success', 'info', 'warning', 'error'), a title parameter and an optional content and timeout parameter:

var notify = {
    type: 'success',
    title: 'Create Item Successful!',
    content: 'Item ( id: 2031 ) has already added to the list.',
    timeout: 5000 //time in ms
};
$scope.$emit('notify', notify);

angular-notify's People

Contributors

abnersajr avatar cheironz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.