mat-grid-Liste mit einer Matte-Karte und Matte-card-Aktionen/Matte-card-Fußzeile

Ich habe den folgenden code, im Winkel 6-und material-design:

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

Und css –

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

Aber egal was ich ändere in der css-ich war nicht in der Lage, um die Matte-card-Aktionen oder die Matte-card-Fußzeile in der unteren Karte.
Also:

  1. Die Struktur stimmt oder etwas fehlt?
  2. Ob seinem Recht, wie die Matte-card-Aktionen/Matte-card-Fußzeile in der unteren mat-Gitter-Fliese?
  • Haben Sie importiert MatCardModule? Dein Beispiel-code sieht gut aus aber es hat nicht die Matte-card-footer, so ist dies wahrscheinlich nicht Ihre echten code. Erstellen Sie eine funktionierende StackBlitz Beispiel oder zumindest die post alle Ihre tatsächlichen code.
  • Den code habe ich nur enthält die Matte-card-Aktionen, aber ich habe versucht, mit Matte-card-Fußzeile und weder look zu arbeiten. Sorry für die Verwirrung#
  • Nur für den Fall, dass ich erstellen: Winkel-xtf5eq.stackblitz.io code: stackblitz.com/edit/angular-xtf5eq
  • Fußzeile in der richtigen position, wenn Sie nicht height: 100% auf die mat-cards. Es könnte ein Fehler sein. Ich glaube nicht, dass es etwas „falsch“ mit Ihrem code zu verwenden, mit der Höhe, auf der die Karten.



One Reply
  1. 0

    Versuchen, eine mat-card (mit oder ohne Fußzeile,ein Bild oder ein header) oder eine benutzerdefinierte Komponente, die Verwendung mat-card mit fxFlex Wert innerhalb eines div oder was auch immer element mit fxLayout="row wrap wie diese:

    <div fxLayout="row wrap">
        <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
    </div>

    Diese Frage ist ähnlich diese eine

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.