So erstellen Sie eine reaktionsfähige (variierende Anzahl von Spalten) Angular-Material Kartenraster

Ich versuche, ein Raster aus Angular-Material-Karten zu erstellen, die sich etwas wie ein Bootstrap-Gitter verhält. Im Idealfall sind Karten für kleine Bildschirmbreiten voller Breite und springen an größeren Haltepunkten zu zwei Spalten.So erstellen Sie eine reaktionsfähige (variierende Anzahl von Spalten) Angular-Material Kartenraster

Demo with 2 cards

Das Problem ist, dass A-M Spalten für jede Karte erstellt. Ich habe nicht herausgefunden, wie man die Anzahl der Spalten für jeden Haltepunkt angibt.

Demo with 5 cards

Hier ist die Grundlage des Auszeichnungs ich verwende, die das Kartenlayout aus Zeilen in Spalten an dem ersten Haltepunkt nimmt:

<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>

Es gibt ein similar question on SO schon, aber akzeptierte Antwort ist unbefriedigend, da es benutzerdefiniertes CSS verwendet und die Karten keine Fließbreite haben. Ich habe keine anderen ähnlichen Beispiele gefunden.

Ich nehme an, ich könnte alle zwei Karten mit Angular wiederholen und gestapelte Sätze erstellen, aber das scheint unnötig umständlich. Ich muss denken, dass Material eine bessere Lösung bietet. Solche Lösungen würden auch Leerräume in der Seite hinterlassen, in der Karten in der Höhe variieren. Das Material scheint auf ein maurerartiges Flexlayout ausgerichtet zu sein, und ich möchte dabei bleiben.

Danke.

Quelle

2015-12-14 isherwood

Mögliche mit CSS nur, auch mit ein Mauerwerk Look/Stil. http://designshack.net/articles/css/maurryon/#bsap_1610 – g19fanatic

Die Frage ist, wie man es mit Angular Material macht. Ich habe viel Erfahrung mit anderen Bibliotheken und Techniken. Dies scheint jedoch ein Mangel von A. M. zu sein, es sei denn, ich vermisse etwas. – isherwood

Ich bin in genau diesem gleichen Problem gelandet und es gibt keine native Lösung, die ein Maurerarbeit Raster für Sie tun wird. AMs Reaktionsfähigkeit kommt von den Flexbox-Containern, nicht auf der Ebene der Direktive, so dass sie nicht wirklich miteinander kommunizieren. Ich habe tatsächlich gestapelte Sets erstellt, genau wie du es dir selbst vorgeschlagen hast. – staypuftman

Sie können das Material Grid-List verwenden, es ermöglicht benutzerdefinierte Spalten und animiert die Änderungen, wenn sich die Breite ändert.

Ich passte die Probe von der Website und fügte md-card in den Inhalt. Achten Sie darauf, layout-fill auf der md-card hinzuzufügen. Sie können das Beispiel für Ihre Spaltenanzahl leicht anpassen.

http://codepen.io/anon/pen/QypjWY

I angepasst Ihre 5-Karten-Probe auch. Sie müssen die Höhe der Karten kennen, um die Grid-Liste verwenden zu können, aber Sie können die Höhe von 100% auf kleinen Bildschirmen leicht erreichen. Sie können Ratios oder feste CSS-Höhen für die Zeilen verwenden und dann ist es Ihr Karten-Job, den Inhalt auf flexible Weise anzuzeigen.

<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/

Edit:

Wenn Sie stattdessen für eine Art von gestaffelten Gitter suchen, dann müssen Sie eine Bibliothek hinzufügen: angular-deckgrid, es bietet nur das Raster-Layout, alles Im Inhalt ist eckiges Material. Im Gegensatz zu angular-masonry hat diese Bibliothek keine Abhängigkeiten. Wenn Sie keine Angst davor haben, jQuery und ähnliches hinzuzufügen, können Sie auch eckiges Mauerwerk verwenden.

<div ng-app="app" ng-controller="DeckController" flex layout="column"> 
    <deckgrid class="deckgrid" flex source="data"> 
     <md-card>

Der wichtige Teil für das Deck Layout ist die CSS configuration. Hiermit konfigurieren Sie die Anzahl der Spalten und deren Breite. Ich habe eine Medienabfrage für den Winkel-Material sm Breakpoint verwendet, um auf ein einzelnes Spaltenlayout zu wechseln.

.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/

Edit 2:

Es gibt auch eine Mauerwerk-Version, die jQuery und eine einfache Anweisung, es zu benutzen ist es nicht erforderlich: angular-masonry-directive. Hier ist ein Beispiel, es funktioniert ähnlich wie das andere.

http://jsfiddle.net/xjnp97ye/1/

Quelle

2016-01-05 11:21:02 kuhnroyal

Das erste Beispiel scheint wie ein guter Anfang, aber ich bin mir nicht sicher, ob ich damit leben kann die festen Höhen. Ich habe die Demo für meine Zwecke vereinfacht: http://codepen.io/anon/pen/YwZwbz Die zweite lässt unterschiedliche Leerzeichen zwischen den Zeilen, wie ich in meiner Frage erwähnt habe. Es wird wahrscheinlich nicht funktionieren. – isherwood

Ich bin fasziniert von Ihrem Update, aber das dritte Beispiel (39) scheint nicht reagierendes Verhalten zu zeigen. Das vierte Beispiel sieht wie eine gute Option aus. – isherwood

Sie haben Recht, der dritte ist etwas begrenzt. Wenn Sie das Beispiel mit einer großen Breite ausführen und dann die Breite reduzieren, wird es reaktionsschnell reagieren, aber nicht umgekehrt. Es wird jedoch wie erwartet auf verschiedenen Geräten mit einer festen Breite und/oder Neuzeichnen, z. Device Rotation etc. Die Bibliothek analysiert den Pseudo ':: before' CSS-Block und muss dort etwas falsch machen. – kuhnroyal

Wenn ich die Frage richtig verstanden, das funktioniert wie ein Zauber:

<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 mit mehreren Haltepunkten: (die innere Fenstergröße ändern, nicht das Browserfenster) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

Der Plünderer wurde aktualisiert, um Karten mit unterschiedlicher Höhe anzuzeigen.
2 Direktiven wurden erstellt, so dass die größte Höhe aller Karten im Speicher gehalten wird und diese auf alle Karten angewendet wird.

Quelle

2016-01-09 22:24:23 gr3g

Danke, aber ich kann nicht mehr als eine Änderung des Haltepunkts anzeigen. Kannst du die Demo verbessern um mindestens 3 zu zeigen? – isherwood

Siehe Aktualisierung. Gern geschehen – gr3g

Ich habe eine Version mit unterschiedlichem Inhalt gegabelt. Wie Sie sehen können, ist es nicht gut. Die Karten laufen zusammen und schneiden den Inhalt ab. Gedanken? http://plnkr.co/edit/VNyWOpCocKGfY0qX2IjK?p=preview – isherwood

<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>

prüfen dieses Beispiel: http://codepen.io/ktn/pen/jqNBOe

Quelle

2016-02-25 10:19:10 kTn

rechts, aber was, wenn deine Karten nicht alle die gleiche Höhe haben – chrismarx

wenn ich Ihre Frage richtig verstanden Dann diesen Code verwenden und ersetzen die hallo mit so etwas wie Sie

<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>

Quelle

2016-02-25 14:15:32

Das ist eine großartige Antwort. Das einzige Problem ist die Grid-Liste hat einige Inkompatibilitäten, wie zum Beispiel mit dem unendlichen Scroll – chrismarx

@chrismarx ich stimme zu, aber kann die Grid-Liste nicht innerhalb einer virtuellen Wiederholung gehalten werden? da können wir unendlich scroll implementieren. –

Ich denke, ich habe das versucht, und hatte dieses Problem-https://github.com/angular/material/issues/5312 – chrismarx

So erstellen Sie eine reaktionsfähige (variierende Anzahl von Spalten) Angular-Material Kartenraster

Antwort

Verwandte Themen