Angulaire Matériau: faire un tapis de carte à remplir un ensemble de mat-grille-tuile
Je veux utiliser mat-grid-list
pour créer une liste de grille de mise en page dans laquelle chaque mat-grid-tile
contient un mat-card
qui remplit l'intégralité de la vignette quel que soit le contenu de la carte. La plupart des cartes de besoin d'occuper plusieurs lignes et/ou colonnes. Jusqu'à présent, je n'ai pas été capable de le faire fonctionner.
Choses que j'ai essayé:
- Réglage de chaque carte CSS
width
etheight
à 100% à l'aide du sélecteurmat-card
. Cela provoque chaque carte de remplir la totalité de l'écran plutôt que de simplement lemat-grid-tile
qui contient la carte. - Réglage de chaque carte CSS
width
etheight
à 100% à l'aide du sélecteurmat-grid-tile > mat-card
. Cela a le même effet que de ne pas avoir un sélecteur à tous, comme les cartes de rester centré à l'intérieur de leur grille de tuiles enroulé à la taille de leurs contenus respectifs. - Suivant le code de la cette question. Le problème est que les propriétés
flex
,layout-wrap
, etlayout-fill
ne sont pas disponible pour moi, probablement parce que l'exemple de code utilise Angulaire 2 au lieu de 4.
Edit: Il semble que j'ai mal compris les résultats de la première tentative énumérés ci-dessus. Les cartes de remplir simplement la mat-grid-tile
s, mais leurs ombres entourant coupé par les carreaux ont des limites.
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas sûr de ce que exactement ne fonctionne pas pour vous, mais j'ai juste recréé votre scénario dans stackblitz, et utilisé le style suivant pour
mat-card
:Voici la stackblitz lien: https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css
Et juste au cas où vous êtes inquiet (comme je l'ai été) sur la prise en charge de css
calc()
voici les navigateurs et versions: http://caniuse.com/#feat=calc(réponse a été mise à jour basé sur premier commentaire)