angular-progress-button-styles, AngularJS的codrops进度按钮版本,用于承诺

分享于 

5分钟阅读

GitHub

  繁體 雙語
AngularJS version of codrops progress buttons for the use with promises
  • 源代码名称:angular-progress-button-styles
  • 源代码网址:http://www.github.com/akveo/angular-progress-button-styles
  • angular-progress-button-styles源代码文档
  • angular-progress-button-styles源代码下载
  • Git URL:
    git://www.github.com/akveo/angular-progress-button-styles.git
    Git Clone代码到本地:
    git clone http://www.github.com/akveo/angular-progress-button-styles
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/akveo/angular-progress-button-styles
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    angular-progress-button-styles

    AngularJS的Codrops进度按钮。 我除了css之外,还制作了 LESS 和sass版本。

    查看现场演示

    基本用法

    安装 Bower 软件包:

    bower install --save angular-progress-button-styles

    包含脚本和样式( 我使用FontAwesome成功和错误图标,但是你可以重写它):

    <linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <linkrel="stylesheet"type="text/css"href="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css">
    <scripttype="text/javascript"src="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js"></script>

    添加 Angular 模块依赖项:

    var app =angular.module('app', ['angular-progress-button-styles']);

    向按钮元素添加指令 !

    <buttonprogress-button="someFunctionThatReturnsPromise()">Submit</button>

    就是这样享受插件 !

    配置

    指令本身作为参数回调函数,在执行后返回 promise。 如果函数返回值,则立即完成。 你可以使用两种不同的方式配置插件:

    • 使用html属性
    • 使用 javascript
    HTML配置

    以下是支持的HTML属性及其含义的列表:

    属性可用值含义
    pb风格
    • 填充
    • 收缩
    • rotate-angle-bottom
    • rotate-angle-top
    • rotate-angle-left
    • rotate-angle-right
    • rotate-side-down
    • rotate-side-up
    • rotate-side-left
    • rotate-side-right
    • 后退
    • 向下滑动
    • 首行
    • 上移
    • 侧线
    • 打开
    定义按钮外观。默认值为填充。
    pb方向
    • 水平
    • 竖直
    pb-style= ( 填充或者缩小) 一起使用。 定义进度条的direction。
    默认值为水平。
    pb-random-progress
    • true
    • false
    从单击按钮开始随机运行随机填充功能直到被解析。
    默认值为 true。
    pb配置文件字符串值在按钮初始化过程中从中提取配置的配置文件。
    有关更多信息,请参见JS配置节
    Javascript配置

    对于那些不喜欢在HTML中配置大量配置以防止复制粘贴,也可以使用配置文件定义配置。 为此,你需要在应用程序配置期间注入 progressButtonConfigProvider:

    mdl.config(function(progressButtonConfigProvider) {
     progressButtonConfigProvider.profile('testProfile', {
     style:'shrink',
     direction:'vertical' });
    });

    在这个示例中,创建了名为'testprofile'的新概要文件。 然后,你可以像这样将它应用到你的按钮:

    <buttonprogress-button="someFunctionThatReturnsPromise()"pb-profile="testProfile">Submit</button>

    这将创建新的按钮,带有样式收缩和垂直。

    还可以定义默认配置文件,该配置文件将应用于应用程序中的所有按钮:

    progressButtonConfigProvider.profile({
     style:'shrink',
     direction:'vertical'});

    许可证

    许可证。

    捐赠

    欢迎你贡献。 请随时联系我。

    特别感谢你的贡献:


    cod  angular  版本  按钮  进度  buttons  
    相关文章