angularjs - tutorial - Cómo crear una cuadrícula de tarjetas de material angular con capacidad de respuesta(cantidad variable de columnas)
angularjs material css (4)
Puede utilizar el material Grid-List , que permite realizar coles personalizados y anima los cambios cuando cambia el ancho.
Adapté la muestra del sitio y agregué md-card en los contenidos. Asegúrese de agregar layout-fill en la md-card . Puede adaptar fácilmente la muestra para su recuento de columnas.
http://codepen.io/anon/pen/QypjWY
También adapté tu muestra de 5 cartas. Necesitas saber la altura de las cartas para usar la Lista de cuadrículas, pero puedes alcanzar fácilmente la altura del 100% en pantallas pequeñas. Puede usar ratios o alturas de CSS fijas para las filas y luego es su trabajo de tarjetas para mostrar el contenido de una manera flexible.
<md-grid-list ng-app="app" layout-fill flex
md-cols-sm="1"
md-cols-md="2"
md-cols-gt-md="5"
md-row-height-sm="100%"
md-row-height="600px"
md-gutter="8px">
<md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card layout-fill>
http://jsfiddle.net/2afaok1n/34/
Editar:
Si, en cambio, está buscando algún tipo de cuadrícula escalonada, debe agregar una biblioteca: angular-deckgrid , solo proporciona el diseño de la cuadrícula, todo el contenido es material angular. A diferencia de angular-masonry esta biblioteca no tiene dependencias. Si no le preocupa agregar jQuery y similares, también puede usar la mampostería angular.
<div ng-app="app" ng-controller="DeckController" flex layout="column">
<deckgrid class="deckgrid" flex source="data">
<md-card>
La parte importante para el diseño de la cubierta es la configuración de CSS . Con esto configuras el número de columnas y su ancho. He utilizado una consulta de medios para el punto de interrupción de sm material angular para cambiar al diseño de una sola columna.
.deckgrid::before {
content: ''4 .column.column-1-4'';
font-size: 0;
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}
.deckgrid .column-1-1 {
width: 100%;
}
@media screen and (max-width: 960px) {
.deckgrid::before {
content: ''1 .column.column-1-1'';
}
}
http://jsfiddle.net/2afaok1n/39/
Edición 2:
También hay una versión de mampostería que no requiere jQuery y una directiva simple para usarla: angular-masonry-directive . Aquí hay un ejemplo, funciona similar al otro.
Estoy tratando de crear una cuadrícula de tarjetas de material angular que se comporte de alguna manera como una cuadrícula Bootstrap. Idealmente, las tarjetas serán de ancho completo para anchos de pantalla pequeños y saltarán a dos columnas en puntos de interrupción más grandes.
El problema es que AM crea columnas para cada tarjeta. No he descubierto cómo especificar el número de columnas para cada punto de interrupción.
Aquí está la base del marcado que estoy usando, que toma el diseño de la tarjeta de filas a columnas en el primer punto de interrupción:
<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
<div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card>
Ya hay una pregunta similar en SO , pero la respuesta aceptada no es satisfactoria ya que utiliza CSS personalizado y las tarjetas no son de ancho fluido. No he encontrado otros ejemplos similares.
Supongo que podría enlazar cada dos tarjetas con Angular y crear conjuntos apilados, pero eso parece innecesariamente engorroso. Tengo que pensar que el material proporciona una mejor solución. Además, tales soluciones dejarían espacios en blanco en la página donde las tarjetas varían en altura. El material parece estar orientado hacia un diseño flexible similar a la Masonería, y me gustaría seguir con eso.
Gracias.
Si entendí bien la pregunta, esto funciona como un amuleto:
<body ng-app="app" ng-cloak>
<div layout="column" layout-gt-sm="row" layout-wrap>
<div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
<md-card>
<!-- You code-->
</md-card>
</div>
</div>
</body>
Plunker con múltiples puntos de interrupción: (cambiar el tamaño de la ventana interna, no la ventana del navegador) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview
El plunker ha sido actualizado para mostrar cartas con diferente altura.
Se han realizado 2 directivas, por lo que la mayor altura de todas las tarjetas se guarda en la memoria y esta se aplica a todas las tarjetas.
si entendí bien tu pregunta Luego usa este código y reemplaza el saludo con lo que quieras
<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
<md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
hello
</md-grid-tile>
</md-grid-list>
<div ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>
<md-card-title >
<md-card-title-text >
<span class="md-headline">Demo Title {{i}}</span>
<span class="md-subhead">Demo Description</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
Compruebe este ejemplo: http://codepen.io/ktn/pen/jqNBOe