角度材质:嵌套网格 [英] Angular Material: Nested grid
问题描述
我目前正在将 Bootstrap 用于 Web 应用程序,但想切换到 Angular Material.现在我正在玩网格.
我有三重嵌套网格结构.我不认为孩子们被正确显示,或者至少我没有对他们进行编程以正确显示.我不希望它们垂直居中,但我不知道它们为什么会这样.
此外,我希望 grid-title
的标题不会干扰子 grid-list
(我希望子 grid-list
在 grid-title-header
下方开始).最老的"父母的页脚也是如此.
Angular Material 站点 有很好的文档,但没有解决嵌套网格问题.>
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"md-gutter-gt-sm="4px" class="gridList"><md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile"><md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"md-row-height-gt-md="1:1" md-row-height="1:1"><md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile"><md-grid-tile-header><h4>子集群标题</h4></md-grid-tile-header><md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"md-row-height="1:1"><md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">ID</md-grid-tile></md-grid-list></md-grid-tile></md-grid-list><md-grid-tile-footer><h3>集群名称</h3></md-grid-tile-footer></md-grid-tile></md-grid-list>
到目前为止,我真的很喜欢 Material Design,并且相信它是响应式网页设计的未来.我认为越来越多的网站将使用它来代替 Bootstrap(Bootstrap 的 JS 组件完全依赖于 jQuery,除非你使用的是 AngularUI 之类的东西),所以我想学习如何正确使用它.
我相信 Angular Material 站点缺少有关此布局指令的文档,但是 layout-fill
正是我在找什么.
只需在嵌套网格列表上定义layout-fill
.
<md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"md-gutter-gt-sm="4px" class="gridList" layout="row"><md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile"><md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"md-rows-md="4" 布局填充><md-grid-tile md-colspan="1" md-rowspan="1" layout="col"class="flexTile">瓦</md-grid-tile></md-grid-list><md-grid-tile-footer><h3>集群名称</h3></md-grid-tile-footer></md-grid-tile></md-grid-list>
并放大...
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"md-rows-md="4" 布局填充><md-grid-tile md-colspan="1" md-rowspan="1" layout="col"class="flexTile">瓦</md-grid-tile></md-grid-list>
此解决方案不包括图块页眉和页脚的解决方案,但我想您可以定义某种定位来使其工作.
I'm currently using Bootstrap for a web application, but want to switch to Angular Material. Right now I am playing around with the grid.
I have triple nested grid structure. I don't think the children are being displayed correctly, or at least I haven't programmed them to display correctly. I want them to not be vertically centered, but I don't know why they are behaving this way.
Additionally, I want a grid-title
's header to not interfere with the child grid-list
(I want the child grid-list
to begin underneath the grid-title-header
). The same goes with the "oldest" parent's footer.
The Angular Material site has good documentation but doesn't address nested grids.
<body ng-app="app">
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList">
<md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="1:1">
<md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile">
<md-grid-tile-header><h4>Sub-cluster Title</h4></md-grid-tile-header>
<md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
md-row-height="1:1">
<md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">
ID
</md-grid-tile>
</md-grid-list>
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
</body>
I really like Material Design so far, and believe it's the future of responsive web design. I think more and more websites are going to be using it in place of Bootstrap (Bootstrap's JS components are totally jQuery dependent unless you are using something like AngularUI), so I want to learn how to use it properly.
I believe the Angular Material site lacks documentation for this layout directive, but layout-fill
is exactly what I was looking for.
Just define layout-fill
on the nested grid list.
<md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList" layout="row">
<md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
And zooming in...
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
This solution doesn't include the solve for tile headers and footers, but I imagine you could just define some sort of positioning to make it work.
这篇关于角度材质:嵌套网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!