Material angular: rejilla anidada
Actualmente estoy usando Bootstrap para una aplicación web, pero quiero cambiar a Material angular. En este momento estoy jugando con la cuadrícula.
Tengo una estructura de rejilla anidada triple. No creo que los niños se muestren correctamente, o al menos no los he programado para que se muestren correctamente. Quiero que no estén centrados verticalmente, pero no sé por qué se comportan de esta manera.
Además, quiero ungrid-titleEl encabezado para no interferir con el niñogrid-list (Quiero al niñogrid-list para comenzar debajo de lagrid-title-header) Lo mismo ocurre con el pie de página del padre "más viejo".
losSitio de material angular tiene buena documentación pero no trata las cuadrículas anidadas.
<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>
Realmente me gusta el diseño de materiales hasta ahora, y creo que es el futuro del diseño web receptivo. Creo que cada vez más sitios web lo usarán en lugar de Bootstrap (los componentes JS de Bootstrap dependen totalmente de jQuery a menos que esté usando algo como AngularUI), por lo que quiero aprender a usarlo correctamente.