it-swarm.com.ru

Разделение Angular Материальных карт по вертикали

Я хочу перечислить элементы в массиве вертикально с карточками, но между ними нет места. Я пытался использовать отступы, но, похоже, это не работает.

изображение карты

Как я могу расположить эти карты?

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="asd cardPardding" *ngFor="let title of titles">
      <p>
      {{title}}
      </p>
    </mat-card>
  </ng-container>

  <ng-template #noTitle>
    <mat-card class="asd cardPardding">
      <p>
      No title !
      </p>
  </mat-card>
  </ng-template>

Это css

.asd {
  width: 80%;
  margin: 0 auto; /* Added */
}

.inputasd {
  width: 100%;
}

.cardPadding {
  padding: 100px;
  margin-bottom: 50px;
}
4
Alperzkn

.component.html

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
        <p>
            {{title}}
        </p>
    </mat-card>
</ng-container>

<ng-template #noTitle>
    <mat-card class="asd cardPardding">
        <p>
            No title !
        </p>
    </mat-card>
</ng-template>

файл .css/.scss

.my-class-name{
    margin-bottom: 10px;
    ... 
}
3
Krishna Rathore

Я потратил слишком много времени, чтобы это исправить. Тогда я подумал, что знаю что-то не так, но моя ошибка - только 1 буква в названии класса. У тебя все хорошо, маржа работает. Я неправильно набрал имя класса. Спасибо за ответ.

0
Alperzkn