我正在尝试创建一个Angular-Material卡网格,其行为有点像Bootstrap网格.理想情况下,对于小屏幕宽度,卡片将是全宽度的,并且在较大断点处跳转到两列.
用2张卡片演示
问题是AM为每张卡创建了列.我还没想出如何为每个断点指定列数.
用5张卡演示
这是我正在使用的标记的基础,它在第一个断点处从行到列采用卡布局:
SO上已经有类似的问题,但是接受的答案并不令人满意,因为它使用自定义CSS并且卡片不是流畅的.我没有找到其他类似的例子.
我想我可以使用Angular循环每两张卡并创建堆叠集,但这似乎是不必要的麻烦.我不得不认为Material提供了更好的解决方案.此外,这样的解决方案会在卡片高度不同的页面中留下空白.材料似乎面向类似砌体的柔性布局,我想坚持下去.
谢谢.
1> kuhnroyal..:您可以使用材质Grid-List,它允许自定义col-spans并在宽度更改时设置更改动画.
我从网站上调整了样本并添加
md-card
了内容.确保添加layout-fill
的md-card
.您可以轻松调整样品的柱数.http://codepen.io/anon/pen/QypjWY
我还调整了你的5张卡样本.您需要知道卡的高度才能使用网格列表,但您可以轻松地在小屏幕上实现100%的高度.您可以为行使用比率或固定的CSS高度,然后以灵活的方式显示内容是您的卡工作.
http://jsfiddle.net/2afaok1n/34/
编辑:
如果你正在寻找某种交错的网格,那么你必须添加一个库:angular-deckgrid,它只提供网格布局,内容中的所有内容都是angular-material.与angular-masonry不同,这个库没有任何依赖关系.如果您不担心添加jQuery等,那么您也可以使用angular-masonry.
甲板布局的重要部分是CSS配置.使用此功能,您可以配置列数及其宽度.我使用了角度材质
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.这是一个例子,它与另一个类似.
http://jsfiddle.net/xjnp97ye/1/
推荐阅读
如何解决《(Jade或Slim)类似于React的语法?》经验,为你挑选了1个好方法。 ... [详细] 如何解决《在SeleniumOperaWebdriver中启用OperaTurbo》经验,为你挑选了0个好方法。 ... [详细] 如何解决《有没有办法让DelphiVCL表格大小而不改变BorderStyle?》经验,为你挑选了2个好方法。 ... [详细] 如何解决《RxJava:观察套接字发出的消息》经验,为你挑选了1个好方法。 ... [详细] 如何解决《SBT目录结构.什么是"项目"?》经验,为你挑选了1个好方法。 ... [详细] 如何解决《谷歌地图有角度》经验,为你挑选了1个好方法。 ... [详细] 如何解决《了解R中的P值-轻松》经验,为你挑选了1个好方法。 ... [详细] 如何解决《Dagger不喜欢抛出异常的构造函数》经验,为你挑选了1个好方法。 ... [详细] 如何解决《如何在R包中定义"隐藏的全局变量"?》经验,为你挑选了2个好方法。 ... [详细] 如何解决《无法获得app.local到路由文件》经验,为你挑选了0个好方法。 ... [详细] 如何解决《解释SML函数及其类型》经验,为你挑选了1个好方法。 ... [详细] 如何解决《IntelliJIDEATypeScript/Webpack调试仅适用于JavaScript断点》经验,为你挑选了0个好方法。 ... [详细] 如何解决《将元素添加到列表的代码变体之间的差异》经验,为你挑选了1个好方法。 ... [详细] 如何解决《结合Theano中的标量和矢量来计算Hessian》经验,为你挑选了0个好方法。 ... [详细] 如何解决《用渐变替换饼图颜色》经验,为你挑选了1个好方法。 ... [详细] 如何解决《问号'?'在锚链接》经验,为你挑选了1个好方法。 ... [详细] 如何解决《为什么要使用uWSGImax-requests选项?》经验,为你挑选了1个好方法。 ... [详细] 如何解决《可重复使用的redux存储数据计算的最佳实践》经验,为你挑选了1个好方法。 ... [详细] 如何解决《名称和存在的functor或monad链接和终止操作序列》经验,为你挑选了1个好方法。 ... [详细] 如何解决《在Scheme或STk中,函数将显示为过程或闭包,但为什么LISP会出错?》经验,为你挑选了2个好方法。 ... [详细]吐了个 "CAO" !Tags | 热门标签RankList | 热门文章
- 1Paypal:计费计划+协议 - 基本Qs
- 2关于水平循环器视图中的ProperScrolling
- 3在ubuntu中的Ionic框架中添加Android平台时出错
- 4来自AngularJS的Django CORS API
- 5来自Cluster的HADOOP_CONF_DIR的值
- 6在Android Studio消息"Paint.setShadowLayer ..图形不准确.."没有此代码
- 7为什么我们不加延迟地调用$ timeout。
- 8Kendo DateTimePicker设置当前小时12:00 AM而不是DateTime.Now
- 9使用AJAX调用执行Javascript
- 10查找类中的所有属性是否相同
- 11关于迦太基更新的Alamofire错误
- 12为什么HAProxy无法加载letsencrypt生成的证书?
- 13初始化WireMock HTTP服务器时出现HttpHostConnectException
- 14在Matlab中设置向量的初始类型
- 15无法安装rgdal
- 16Calulcate在一列时间戳上使用difftime运行时间差
- 17Scipy稀疏反转或spsolve导致UMFPACK_ERROR_OUT_OF_MEMORY
- 18AngularJS花括号没有解析,但ng-bind有效
- 19烧瓶中的芹菜:AttributeError:'Flask'对象没有属性'user_options'
- 20如何使用AngularJS在数据库的复选框中设置默认值
DevBox开发工具箱 | 专业的在线开发工具网站 京公网安备 11010802040832号 | 京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有