adapt-strap 特性:<a href="https://github.com/Adaptv/adapt-strap#usage"></a>用法 介绍
adapt-strap 是 AngularJS UI 组件和实用工具,是基于
AngularJS 1.2+ 和
bootstrap 3 的。
特性:
-
Table Lite - 简单的列表 UI
-
Table AJAX - 高级的列表 UI
-
Tree Browser - 简单的树形 UI
-
Loading Indicators - 简单的指令
-
Global configuration - 所有组件都是全局配置使用
-
Customizable - 所有组件都是支持高度自定义的
用法
-
使用 bower install adapt-strap --save安装
-
把库文件放入 index.html 文件:
-
添加 adaptv.adaptStrap 模块作为依赖
angular.module(‘myApp’, [
‘ngSanitize’, // adapt-strap requires ngSanitize
‘adaptv.adaptStrap’
]);
示例代码:
<div ng-controller="tableajaxCtrl"> <!-- ========== Simple Table Implementation ========== --> <div class="panel panel-default"> <div class="panel-body"> <ad-table-ajax table-name="artistsTable" column-definition="artistsColumnDef" table-classes="table table-bordered" page-sizes="[5, 20, 50]" pagination-btn-group-classes="btn-group btn-group-xs" ajax-config="artistsAjaxConfig"> </ad-table-ajax> </div> </div> <!--========== Advanced Implementation with search ========== --> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" ng-change="searchArtist()" ng-model="artistSearchKey"> <span class="input-group-addon"> <i class="glyphicon glyphicon-search"></i> </span> </div> </div> </div> </div> <div class="panel-body"> <ad-table-ajax table-name="artistsTableSearch" column-definition="artistsColumnDefSearch" table-classes="table table-bordered" page-sizes="[5, 20, 50]" pagination-btn-group-classes="btn-group btn-group-sm" ajax-config="artistsAjaxConfigSearch" page-loader="methods.pageLoader"> </ad-table-ajax> </div> </div></div>
adapt-strap 特性:<a href="https://github.com/Adaptv/adapt-strap#usage"></a>用法 官网
https://github.com/Adaptv/adapt-strap
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。