Angular Deckgrid(专用仿Masonry布局的类库) v0.6.0 官方最新版

Angular Deckgrid(专用仿Masonry布局的类库) v0.6.0 官方最新版
宝哥软件园收集的Angular deckgrid 是一个数据网格用AngularJS的一部分,需要的朋友欢迎下载。该指令不依赖于视觉展示,所有的响应和美观都依赖于你的 CSS 文件。如果你现在选择使用angular.js作为你的开发框架的话,实现类似masonry的网格布局效果将会变得更加简单,今天介绍的轻量,欢迎免费下载体验
软件大小:22KB
软件类型:汉化软件
软件语言:简体中文
软件授权:免费软件
最后更新:2021-08-31 15:16:21
推荐指数:
运行环境:WinAll, WinXP
查看次数:
Angular deckgrid是数据网格AngularJS的一部分。欢迎有需要的朋友下载。这个指令不依赖于视觉显示,所有的反应和美观都依赖于你的CSS文件。如果现在选择使用angular.js作为自己的开发框架,会更容易实现类似于砖石的网格布局效果。今天介绍的轻量级类库Angular-deckgrid可以帮助你快速生成类似的魔法布局效果。
安装教程
一、安装
1.凉亭安装-节省角度-甲板
2.将代码添加到您的HTML中
脚本src=' your-bower-components/angular-deck grid/angular-deck grid . js '/脚本
3.添加到您的角度模块:
angular.module('your.module ',[
akoenig.deckgrid '
]);
使用教程
定义声明:
div deck grid source=' photos ' CardTemplate=' templates/deck grid-card . html ' class=' deck grid '/div
定义数据结构:
$scope.photos=[
id: 'p1 ',' title': '天气真好!',src : ' http://lorempixel.com/300/400/',
id: 'p2 ',' title': 'Puh!',src : ' http://lorempixel.com/300/400/sports ',
id: 'p3 ',' title': '多棒的俱乐部啊!',src : ' http://lorempixel.com/300/400/夜生活'
];
定义卡片模板:
div class='a-card '
h1{{card.title}}/h1
img src=' ' data-ng-src=' { { card . src } } '
/div
为了更好地设计响应页面,您可以选择使用以下代码来定义不同设备或显示器上的显示行为:
@媒体屏幕和(最大宽度: 480 px){ 0。deck grid[deck grid]: before {
content :“1 . column . column-1-1”;
}。deckgrid。第-1-1栏{
宽度: 100%;
}
}
更新日志
版本0.6.0
打开:[修复]我们需要一个解决方案来防止模型内部HTML模板的组合
版本0.5.0
升级依赖于AngularJS的bower.json(v1.3.0)。
更改集合比较会触发重绘。
手表从美元转移到手表收集美元,以获得更多的性能。
移植AngularJS的标准函数进行一般的未定义检查。