Angular Material: Verschachteltes Gitter
Ich verwende derzeit Bootstrap für eine Webanwendung, möchte aber zu Angular Material wechseln. Im Moment spiele ich mit dem Gitter.
Ich habe eine dreifach verschachtelte Gitterstruktur. Ich glaube nicht, dass die Kinder richtig angezeigt werden, oder zumindest habe ich sie nicht so programmiert, dass sie richtig angezeigt werden. Ich möchte, dass sie nicht vertikal zentriert sind, aber ich weiß nicht, warum sie sich so verhalten.
Zusätzlich möchte ich eingrid-title 's Header, um das untergeordnete @ nicht zu störgrid-list (Ich will das Kindgrid-list, um unter dem @ zu beginngrid-title-header). Das gleiche gilt für die Fußzeile der "ältesten" Eltern.
DasAngular Material site hat eine gute Dokumentation, befasst sich jedoch nicht mit verschachtelten Gittern.
<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>
Ich mag Material Design bis jetzt sehr und glaube, es ist die Zukunft des responsiven Webdesigns. Ich denke, dass immer mehr Websites es anstelle von Bootstrap verwenden werden (die JS-Komponenten von Bootstrap sind vollständig von jQuery abhängig, es sei denn, Sie verwenden etwas wie AngularUI), also möchte ich lernen, wie man es richtig verwendet.