angular-notification-icons, 向任何元素添加通知弹出窗口

分享于 

11分钟阅读

GitHub

  繁體 雙語
Add notification popups to any element
  • 源代码名称:angular-notification-icons
  • 源代码网址:http://www.github.com/jacob-meacham/angular-notification-icons
  • angular-notification-icons源代码文档
  • angular-notification-icons源代码下载
  • Git URL:
    git://www.github.com/jacob-meacham/angular-notification-icons.git
    Git Clone代码到本地:
    git clone http://www.github.com/jacob-meacham/angular-notification-icons
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jacob-meacham/angular-notification-icons
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    angular-notification-icons

    向任何元素 http://jemonjam.com/angular-notification-icons 添加通知弹出窗口。

    Build StatusCoverage StatusCode Climate

    demo

    <notification-icon count='scopeVariable'><i class="fa fa-envelope-o fa-3x"></i></notification-icon>

    正在启动

    1安装组件

    Bower:

    bower install angular-notification-icons --save

    npm:

    npm install angular-notification-icons --save

    2添加css和脚本

    Bower:

    <linkrel="stylesheet"href="bower_components/angular-notification-icons/dist/angular-notification-icons.min.css">
    <scriptsrc="bower_components/angular/angular.js"></script>
    <scriptsrc="bower_components/angular-animate/angular-animate.js"></script> <!-- Not required, but recommended --><scriptsrc="bower_components/angular-notification-icons/dist/angular-notification-icons.min.js"></script>

    npm:

    <linkrel="stylesheet"href="node_modules/angular-notification-icons/dist/angular-notification-icons.min.css">
    <scriptsrc="bower_components/angular/angular.js"></script>
    <scriptsrc="bower_components/angular-animate/angular-animate.js"></script> <!-- Not required, but recommended --><scriptsrc="bower_components/angular-notification-icons/dist/angular-notification-icons.min.js"></script>

    3。向你的应用程序添加一个依赖项

    
    angular.module('MyApp', ['angular-notification-icons', 'ngAnimate']);//ngAnimate is only required if you want animations
    
    
    
    

    4在任何其他元素周围添加通知图标元素

    <notification-iconcount='scopeVariable'>
    . . .
    </notification-icon>

    angular-notification-icons是一个 Angular 指令,它在任何元素之上添加一个通知弹出窗口。 计数器绑定到范围变量,更新计数就像更新作用域变量一样简单。 angular-notification-icons带有许多隐藏的动画和默认风格,但是很容易添加你自己的风格或者自定义动画。 angular-notification-icons还可以选择侦听DOM事件并清除DOM事件的计数。

    angular-notification-icons已经用 Angular 1.3. x, 1.4. x, 和 1.5. x. 测试过了,它可能使用最近的Angular 和angular动画版本。

    演示程序

    运行演示程序,运行 npm installbower install,然后运行 gulp serve

    web pack和 ES6

    web service Angular 应用程序中可以使用 angular-notification-icons。 在你的主应用程序的顶部,添加:

    
    import angular from 'angular'
    
    
    import 'angular-animate'
    
    
    import 'angular-notification-icons'
    
    
    import 'angular-notification-icons/dist/angular-notification-icons.css'
    
    
    //Can also use less with a less-loader:
    
    
    //import 'angular-notification-icons/src/less/angular-notification-icons.less'
    
    
    
    

    基本用法

    计数器

    angular-notification-icons的唯一必需属性是'计数数'。 这使用双向绑定来将范围变量绑定到隔离范围。 这使得更新计数变得非常简单,因为控制器完全控制了它的设置方式。

    <notification-iconcount="myScopeVariable">
    . . .
    </notification-icon>

    当myScopeVariable为 <= 0时,通知 icon 将不可见。 一旦 myScopeVariable> 0,通知将显示。

    现场演示插件

    内置动画

    angular-notification-icons附带了一些预先构建好的动画供你使用。 注意,只有在使用ngAnimate模块时才可用

    • 退回
    • 淡入淡出
    • 增长
    • 摇晃

    有三个单独的动画事件: 当计数器从 0到非零时出现。出现和消失。 当计数器递增或者递减但不转到零或者从零开始时更新是触发器。 当计数器从非零到零时,会触发消失。 显示和更新的默认动画是增长的,并且没有默认的设置。 一个常见的情况是为出现和更新使用相同的动画,并且你可以使用'动画'属性。

    <notification-iconcount="myCount"animation='bounce'>
    . . .
    </notification-icon>

    这将创建一个通知,在出现和更新计数器时反弹。 还可以显式设置所有三个动画事件:

    <notification-iconcount="myCount"appear-animation='bounce'update-animation='shake'disappear-animation='fade'>
    . . .
    </notification-icon>

    这将创建一个通知,当出现时反弹,更新时抖动,消失时消失。 因为所有这些属性不使用两种方法绑定,如果使用动画的变量,则在绑定时使用 {{myVariable}}。

    现场演示插件

    DOM事件

    angular-notification-icons可以响应DOM事件以清除计数器。 这将清除范围变量并运行 $apply. 如果你想对计数器进行响应,你的控制器可以对变量进行 $watch 操作。

    <notification-iconcount="myCount"clear-trigger='click'>
    . . .
    </notification-icon>

    将在单击时清除计数。 任何DOM事件 NAME 都是有效的触发器。 因为清除触发器不使用两种方法绑定,如果使用变量作为触发器,则在绑定时使用 {{myVariable}}。

    现场演示插件

    定制

    angular-notification-icons的设计非常简单,使它适合你的应用程序的感觉。

    添加自定义样式

    添加自定义样式通过CSS完成。 创建指令时,它向DOM中添加了几个元素

    <notification-icon>
     <divclass="angular-notification-icons-container">
     <divclass="angular-notification-icons-icon overlay">
     <divclass="notification-inner">
     <!-- Your transcluded element here --> </div>
     </div>
     </div>
    </notification-icon>

    你可以在任何级别添加样式。 例如,如果只想更改 notifaction icon的外观,可以添加到应用程序的css中:

    .angular-notification-icons-icon {
     left: -10px;
     background: yellow;
     color: black;
     width: 30px;
     height: 30px;
     font-weight: bolder;
     font-size: 1.2em;
    }

    将通知 icon 显示在左边带有 yellow background 和加粗的文本的左边。 现场演示插件

    添加自定义动画

    添加自定义动画与添加自定义样式一样简单。 angular-notification-icons使用标准角动画 MODULE 提供动画。 这意味着你可以使用CSS关键帧或者CSS转换来构建动画。

    .angular-notification-icons-icon.my-custom-animation {
     transition:0.5slinearall;
    }.angular-notification-icons-icon.my-custom-animation-add {
     background: black;
     color: white;
    }.angular-notification-icons-icon.my-custom-animation-add-active {
     background: yellow;
     color: black;
    }.angular-notification-icons-icon.my-custom-keyframe-animation {
     animation: custom_keyframe_animation 0.5s;
    }@keyframescustom_keyframe_animation {
     from {
     opacity: 0;
     }
     to {
     opacity: 1;
     }
    }

    添加动画就像在指令中通过 NAME 指定它一样简单

    <notification-icon count='myCount' animation='my-custom-animation' disappear-animation='my-custom-keyframe-animation'>...</notification-icon>

    现场演示插件

    高级用法

    hideCount

    如果不希望出现计数号,则可以使用'隐藏计数'属性隐藏计数

    <notification-iconcount='myCount'hide-count='true'>
    . . .
    </notification-icon>

    如果 myCount> 0,通知 icon 将可见,但该数字将被隐藏。 当 myCount <= 0时,icon 将被隐藏为正常。

    现场演示插件

    alwaysShow

    如果你总是希望计数数字出现,即使在 0或者负数时,你也可以添加'总是显示'属性

    <notification-iconcount='myCount'always-show='true'>
    . . .
    </notification-icon>

    现场演示插件

    药片形状

    当通知的数量足够大时,icon 会变成一个药片形状。 通过将css类宽图标添加到 icon的div来实现这一点。 默认情况下,一旦计数为 GREATER 或者等于 100,形状转换为药丸,但通过属性'宽阈值'可以配置。

    <notification-iconcount='myCount'wide-threshold='10'>
    . . .
    </notification-icon>

    这将在 myCount> = 10时将形状更改为 pill。

    现场演示插件

    帮助

    请求请求被欣然接受 ! 确保运行 npm run build 以确保你的PR是免费的并且所有测试都通过了。


    相关文章