Angular Decokgrid是用于数据网格的AngularJS的一部分。欢迎需要它的朋友下载。此说明不依赖于视觉呈现,所有的响应和美学都取决于您的CSS文件。如果你现在选择使用Angularjs作为你的开发框架,那么实现类似于Masonry的网格布局效果将变得更加容易。今天推出的轻量级库Angular dekgrid可以帮助您快速生成类似的神奇布局效果。
安装教程
一. 安装
1. bower install --save angular-deckgrid
2. 添加代码到你的HTML
<script src="<your-bower-components>/angular-deckgrid/angular-deckgrid.js"></script>
3. 添加到你的angular模块中:
angular.module('your.module', [
'akoenig.deckgrid'
]);
使用教程
定义声明:
<p deckgrid source="photos" cardTemplate="templates/deckgrid-card.html" class="deckgrid"></p>
定义数据结构:
$scope.photos = [
id: 'p1', 'title': 'A nice day!', src: "300/400/",
id: 'p2', 'title': 'Puh!', src: "300/400/sports",
id: 'p3', 'title': 'What a club!', src: "300/400/nightlife"
];
定义cardtemplate:
<p class="a-card">
<h1>{{card.title}}</h1>
<img src="" data-ng-src="{{card.src}}">
</p>
为了更好的设计响应式的页面,你可以选择使用如下来代码来定义不同设备或者显示器上的展示行为:
@media screen and (max-width: 480px){
.deckgrid[deckgrid]::before {
content: '1 .column.column-1-1';
}
.deckgrid .column-1-1 {
width: 100%;
}
}
更新日志
0.6.0版本
打开:[修正]我们需要一个解决方案以防止结合的模型innerHTML模板
0.5.0版本
升级用AngularJS的依赖bower.json(v1.3.0)。
改变集合比较触发重画。
转自美元的手表以watchcollection美元为了获得更多的性能。
移植普通未定义检查用AngularJS标准功能。