大佬教程收集整理的这篇文章主要介绍了angularjs – 如何创建响应(变化列计数)角材料卡网格,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
问题是A-M为每张卡创建列。我还没有想出如何指定每个断点的列数。
<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row"> <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index"> <md-card>
有一个similar question on SO已经,但接受的答案是不能令人满意的,因为它使用自定义CSS和卡不流畅的宽度。我没有发现其他类似的例子。
我想我可以用Angular循环每两张卡,并创建堆叠集,但这似乎不必要的繁琐。我必须认为材料提供了一个更好的解决方案。此外,这样的解决方案会在卡片高度不同的页面中留下空格。材料似乎面向像砖石般的弯曲布局,我想坚持。
谢谢。
我调整了站点的样本,并在内容中添加了md卡。确保在md卡上添加布局填充。
您可以轻松地调整样品的列数。
http://codepen.io/anon/pen/QypjWY
我也修改了你的5卡样本。您需要知道卡的高度才能使用网格列表,但您可以轻松地在小屏幕上实现100%的高度。您可以为行使用比例或固定的CSS高度,然后您的卡片工作以灵活的方式显示内容。
<md-grid-list ng-app="app" layout-fill flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="5" md-row-height-sm="100%" md-row-height="600px" md-gutter="8px"> <md-grid-tile ng-repeat="i in [1,5] track by $index"> <md-card layout-fill>
http://jsfiddle.net/2afaok1n/34/
编辑:
如果你正在寻找某种交错的网格,那么你必须添加一个库:angular-deckgrid,它只是提供网格布局,内容中的所有内容都是有角度的。与angular-masonry不同,该库没有任何依赖关系。如果您不用担心添加jQuery等,那么您也可以使用棱角砖。
<div ng-app="app" ng-controller="DeckController" flex layout="column"> <deckgrid class="deckgrid" flex source="data"> <md-card>
甲板布局的重要部分是CSS configuration.您可以配置列数及其宽度。我使用了一个媒体查询角材料sm断点来切换到单列布局。
.deckgrid::before { content: '4 .column.column-1-4'; font-size: 0; visibility: hidden; } .deckgrid .column { float: left; } .deckgrid .column-1-4 { width: 25%; } .deckgrid .column-1-1 { width: 100%; } @media screen and (max-width: 960pX) { .deckgrid::before { content: '1 .column.column-1-1'; } }
http://jsfiddle.net/2afaok1n/39/
编辑2:
还有一个砖石版本,不需要jQuery和一个简单的指令来使用它:angular-masonry-directive.这里是一个例子,它与另一个类似。
以上是大佬教程为你收集整理的angularjs – 如何创建响应(变化列计数)角材料卡网格全部内容,希望文章能够帮你解决angularjs – 如何创建响应(变化列计数)角材料卡网格所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。