Material angular: Grade aninhada
Atualmente, estou usando o Bootstrap para um aplicativo da Web, mas quero mudar para Material angular. Agora eu estou brincando com a grade.
Eu tenho uma estrutura de grade aninhada tripla. Não acho que as crianças estejam sendo exibidas corretamente, ou pelo menos não as programei para exibir corretamente. Quero que eles não sejam centralizados verticalmente, mas não sei por que eles estão se comportando dessa maneira.
Além disso, eu quero umgrid-titlecabeçalho do para não interferir com a criançagrid-list (Eu quero o filhogrid-list para começar embaixo dogrid-title-header) O mesmo ocorre com o rodapé do pai "mais antigo".
oLocal do material angular possui boa documentação, mas não trata de grades aninhadas.
<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>
Eu realmente gosto de design de materiais até agora e acredito que seja o futuro do design responsivo da web. Eu acho que mais e mais sites vão usá-lo no lugar do Bootstrap (os componentes JS do Bootstrap são totalmente dependentes do jQuery, a menos que você esteja usando algo como o AngularUI), então quero aprender como usá-lo corretamente.