设计 md-grid-list [英] Styling a md-grid-list
问题描述
我正在使用 Angular Material 网格列表来显示大约 500 - 1000 个项目.我在设计我喜欢的样式时遇到了一些麻烦.下面是网格列表现在的样子:
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"md-row-height="16:9"md-gutter="12px" md-gutter-gt-sm="8px"><md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1"风格=背景:#f5f5f5"布局对齐=居中"ng-click="vm.addOrder(orgOrder)"><div layout="column"><div>{{orgOrder.orderNumber}}
<!--<div>{{orgOrder.reqExFact |日期:'dd/MM/yyyy'}}</div>-->
</md-grid-tile></md-grid-list>
这是我想要做的:
- 我的网格标题(项目)对于一行来说太大了,如何让我的网格标题适合其中的数据?设置 md-row-height="fit" 使它看起来像这样.
- 目前我的网格列表有几个滚动"长.我想将它放入一个容器中并为其添加一个卷轴.在 md 容器中扭曲我的网格列表或网格标题会将它们的高度设置为 0.
如果您需要查看我的更多代码,请告诉我.
这里有一个类似于我的代码的 jsfiddle:https://jsfiddle.net/rakshak/6tjgbb85/
我希望网格标题(项目)适合其中的文本,并且我希望在整个网格列表周围包裹一个容器,并有一个溢出滚动条而不是整个窗口滚动.
像 md-row-height="20px"
或 md-row-height= 一样设置 md-row-height30px"
似乎很好地解决了高度问题.将网格嵌套在固定高度的 div 中定义如下:
.tileContainer {display:block;宽度:100%;高度:100px;}
会给你一个瓷砖滚动条.
我在这里分叉了你的 plunker:https://jsfiddle.net/uegLh6t4/
I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now:
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height="16:9"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1"
style="background: #f5f5f5"
layout-align="center center"
ng-click="vm.addOrder(orgOrder)">
<div layout="column">
<div> {{orgOrder.orderNumber}}</div>
<!--<div> {{orgOrder.reqExFact | date : 'dd/MM/yyyy'}}</div>-->
</div>
</md-grid-tile>
</md-grid-list>
Here is what I would like to do:
- My grid titles(items) are a way too big for a single line, how do I make my grid titles fit the data in them? Setting the md-row-height="fit" makes it look like this.
- At the moment my grid-list is several 'scrolls' long. I would like to put it into a container and add a scroll to it. Warping my grid-list or grid title in an md-container sets their height to 0.
Let me know if you need to see any more of my code.
here is a jsfiddle similar to my code:https://jsfiddle.net/rakshak/6tjgbb85/
I would like the grid titles(items) to fit the text in them and I would like to wrap a container around the entire grid list and have a overflow scroll bar instead of the entire window scrolling.
Setting md-row-height like md-row-height="20px"
or md-row-height="30px"
seems to address the height issues nicely. Nesting the grid inside of a fixed height div defined something like this:
.tileContainer {display:block;
width:100%;
height:100px;}
will give you a scroll bar for the tiles.
I forked your plunker here: https://jsfiddle.net/uegLh6t4/
这篇关于设计 md-grid-list的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!