AngularJS UI 组件 adapt-strap

未知
JavaScript HTML/CSS
跨平台
2014-08-13
叶秀兰

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 文件:

<script src="bower_components/adapt-strap/dist/adapt-strap.min.js"></script>
<script src="bower_components/adapt-strap/dist/adapt-strap.tpl.min.js"></script>
<link rel="stylesheet" href="bower_components/adapt-strap/dist/adapt-strap.min.css"/>
  • 添加 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>


加载中

评论(0)

暂无评论

暂无资讯

暂无问答

6个强大的AngularJS扩展应用

AngularJS现在非常热门,是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向数据绑 定、语义化标签、依赖注入等。目前AngularJS扩展还比较少,本文就...

2015/06/30 15:15
97
1
推荐几个不错的VUE UI框架

https://www.awesomes.cn 推荐几个不错的VUE UI框架 1.vue vux:https://vux.li/ 2.mint mint:http://mint-ui.github.io/#!/zh-cn 3.vue-carbon vue-carbon:https://myronliu347.github.io...

2018/06/07 17:15
154
0
Men's diesel Watch​ at particular moments

what forms of look at wrist strap accomplish diesel-engined watches have got? Now quartz, technical sit back and watch tie would be the following. With the opinion Diesel Online...

2015/01/06 11:21
6
0
基于Netty UDP实现的简单心跳机制

基于Netty UDP实现的简单心跳机制

2015/09/26 11:30
352
0
Angular js 常用插件

图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery、imageloaded和Masonry angular-deckgrid 另一个照片瀑布流解决方案 ngImgCrop 图片剪裁工具...

2016/10/17 14:08
49
0
angularjs 日期那些

http://blog.csdn.net/zk437092645/article/details/37882191 http://mgcrea.github.io/angular-strap/ http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm...

2015/08/17 19:04
77
0
不容错过的十款Bootstrap设计工具

Bootstrap前端开发框架大家都比较熟悉了,现在很多网站都采用了这款框架。下面推荐的这10款Bootstrap HTML & CSS UI工具包都是高度可定制的,你可以直接拿来用,也可以根据自己的需要进行再创...

2016/04/14 15:12
89
1
AngularJS常用插件与指令收集

AngularJS常用插件与指令收集

2016/05/20 17:49
31
2
Vue学习资料总结

1: nodejs 安装 首先按正常环境安装nodejs,暗转完后nodejs会自动在系统环境变量的path加上C:\Users\hz15041240\AppData\Roaming\npm 其中hz15041240是你计算机名;由于是nodejs默认安装在C...

2017/12/28 09:26
7
0
Rest Api Step 5. Add items to the cart

This article shows how to add a simple product, a downloadable product, and a bundle product to the cart. All calls are performed on behalf of a customer, and the customer’s t...

08/08 10:11
4
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部