Угловой Материал: Вложенная сетка
В настоящее время я использую Bootstrap для веб-приложения, но хочу перейти на Angular Material. Прямо сейчас я играю с сеткой.
У меня тройная вложенная сетка. Я не думаю, что дети отображаются правильно, или, по крайней мере, я не запрограммировал их отображать правильно. Я хочу, чтобы они не центрировались вертикально, но я не знаю, почему они так себя ведут.
Кроме того, я хочуgrid-titleЗаголовок, чтобы не мешать ребенкуgrid-list (Я хочу ребенкаgrid-list начать подgrid-title-header). То же самое касается «самого старого» нижнего колонтитула родителя.
Угловой материал сайта имеет хорошую документацию, но не относится к вложенным сеткам.
<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>
Мне очень нравится Material Design, и я верю, что это будущее адаптивного веб-дизайна. Я думаю, что все больше и больше сайтов будут использовать его вместо Bootstrap (JS-компоненты Bootstrap полностью зависят от jQuery, если вы не используете что-то вроде AngularUI), поэтому я хочу научиться правильно его использовать.