编程开发

展开

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

大小：22KB语言：英文 类别：编程开发系统：WinAll, WinXP
简介|教程|评论(0)
软件性质：国外软件时间：2022-03-21 11:47:35

标签： Angular

软件介绍

Angular deckgrid 是一个数据网格用AngularJS的一部分,需要的朋友欢迎下载。该指令不依赖于视觉展示，所有的响应和美观都依赖于你的 CSS 文件。如果你现在选择使用angular.js作为你的开发框架的话，实现类似masonry的网格布局效果将会变得更加简单，今天介绍的轻量级类库Angular-deckgrid能够帮助你快速的生成类似的魔术布局效果。

 



安装教程

 

一. 安装

 

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'

 

]);

 

使用教程

 

定义声明：

 

<div deckgrid source="photos" cardTemplate="templates/deckgrid-card.html" class="deckgrid"></div>

 

定义数据结构：

 

$scope.photos = [

 

id: 'p1', 'title': 'A nice day!', src: "http://lorempixel.com/300/400/",

 

id: 'p2', 'title': 'Puh!', src: "http://lorempixel.com/300/400/sports",

 

id: 'p3', 'title': 'What a club!', src: "http://lorempixel.com/300/400/nightlife"

 

];

 

定义cardtemplate：

 

<div class="a-card">

 

<h1>{{card.title}}</h1>

 

<img src="" data-ng-src="{{card.src}}">

 

</div>

 

为了更好的设计响应式的页面，你可以选择使用如下来代码来定义不同设备或者显示器上的展示行为：

 

@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标准功能。

加载全部内容
热门推荐
推荐教程
猜你喜欢
相关合集
Mac词典软件Mac词典软件 Mac安卓模拟器Mac安卓模拟器 保利威软件保利威软件 校音器软件校音器软件 租号上号器租号上号器 WeGame(腾讯游戏平台)WeGame(腾讯游戏平台) 国产浏览器国产浏览器 网速限制软件网速限制软件
用户评论
本类排行