AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条。
这是一个使用uib-progressbar指令的例子:
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {
12 $scope.val = 90;
13 });
14 </script>
15
16 </head>
17 <body>
18 <div ng-controller="ProgressDemoCtrl">
19 <uib-progressbar value="val" type="success">{{val}}%</uib-progressbar>
20 </div>
21 </body>
22 </html>
效果为:
其中,可使用的属性有:
属性名 | 默认值 | 备注 |
value | 进度条当前的值 | |
type | null | 进度条类型,可设置为success, info, warning, danger |
max | 100 | 进度条的最大值 |
animate | true | 是否启用动画 |
title | progressbar | 辅助用的标题 |
另一种进度条是组合多个进度的进度条:
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {
12 $scope.bars = [
13 { value: "30", type: "info" },
14 { value: "30", type: "warning" },
15 { value: "35", type: "danger" }
16 ];
17 });
18 </script>
19
20 </head>
21 <body>
22 <div ng-controller="ProgressDemoCtrl">
23 <uib-progress>
24 <uib-bar ng-repeat="bar in bars track by $index" value="bar.value" type="{{bar.type}}">{{bar.value}}%
25 </uib-bar>
26 </uib-progress>
27 </div>
28 </body>
29 </html>
效果为:
uib-progress可使用的属性有:max、animate、title,uib-bar可使用的属性有value、type、title,这些属性的用法和uib-progressbar一样。
目录:
AngularJs的UI组件ui-Bootstrap分享(一)
AngularJs的UI组件ui-Bootstrap分享(二)——Collapse
AngularJs的UI组件ui-Bootstrap分享(三)——Accordion
AngularJs的UI组件ui-Bootstrap分享(四)——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享(五)——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享(九)——Alert
AngularJs的UI组件ui-Bootstrap分享(十)——Model
AngularJs的UI组件ui-Bootstrap分享(十一)——Typeahead
AngularJs的UI组件ui-Bootstrap分享(十二)——Rating
AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar
AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel
posted on 2016-07-31 22:54 pilixiami 阅读(4964) 评论(0) 编辑 收藏 举报