Sto provando a creare una griglia di carte Angolare-Materiale che si comporta in qualche modo come una griglia Bootstrap. Idealmente, le schede saranno a larghezza intera per le piccole dimensioni dello schermo e saliranno a due colonne in punti di interruzione più grandi.Come creare un reattivo (numero di colonne variabile) Griglia tessera angolare-materiale
Il problema è che A-M crea colonne per ogni carta. Non ho capito come specificare il numero di colonne per ogni punto di interruzione.
Ecco la base del markup che sto utilizzando, che prende il layout della carta da righe alle colonne al primo punto di interruzione:
<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>
C'è già un similar question on SO, ma risposta accettata è insoddisfacente in quanto utilizza CSS personalizzati e le carte non hanno una larghezza del fluido. Non ho trovato altri esempi simili.
Suppongo di poter eseguire il loop di ogni due carte con Angular e creare serie impilate, ma ciò sembra inutilmente ingombrante. Devo pensare che il materiale fornisca una soluzione migliore. Inoltre, tali soluzioni lascerebbero spazi bianchi nella pagina in cui le carte variano in altezza. Il materiale sembra orientato verso un layout flessibile simile alla massoneria, e mi piacerebbe attenervisi.
Grazie.
Possibile con solo css, anche con un aspetto/stile in muratura. http://designshack.net/articles/css/masonry/#bsap_1610 – g19fanatic
La domanda è come farlo con materiale angolare. Ho molta esperienza con altre librerie e tecniche. Questa sembra essere una deficienza di A.M., comunque, a meno che mi manchi qualcosa. – isherwood
Ho incontrato esattamente questo stesso problema e non esiste una soluzione nativa che esegua una griglia di tipo muratura per te. La reattività di AM proviene dai contenitori flexbox, non a livello di direttiva, quindi non comunicano realmente tra loro. In realtà ho creato set impilati proprio come mi hai suggerito. – staypuftman