Angular Макет карт материалов - PullRequest
Новая
       16

Angular Макет карт материалов

0 голосов
/ 13 марта 2020

Я использую Angular Мат-карта и у меня есть кнопка, которая создает новые карты в базе данных каждый раз, когда я нажимаю кнопку, но новая карта отображается прямо в нижней части существующей карты без какого-либо разрыва между ними, поэтому если вы, ребята, можете помочь мне разобраться, как сделать разрыв / маржу, это будет здорово. Спасибо

Вот как это выглядит сейчас

Вот как я хочу выглядеть 

 .clickable {
     cursor: pointer;
 }
 .mat-chip {
     background-color: #DFDFDF;
     text-align: left;
     font: Regular 16px/21px Roboto;
     letter-spacing: 0.29px;
     color: #000000DE;
     opacity: 1;
     border-radius: 18px;
     opacity: 1;
 }
 .mat-card {

     margin-left: -10px;
     padding: 0;
     margin-bottom: 20px;;
     width: 350px;
     height: auto;
     cursor: pointer;
     
   
   }
 .chipMargin{

     margin-left: 5%;
     margin-right: 5%;
 }
 .mat-chip-list {
   display: table-row;
   flex-direction: column;
 }
@media screen and (min-width:768px)
{

.divider {
   height: 90%; 
   position: absolute; 
    left: 900px;
    right: 830px;
    top: 40px; 
 }
.column {
    float: left;
    width: 950px;
    padding: 10px;
    margin-left: 30px;
    margin-top: 10px;

    
}
.column2 {
    width: 730px;
    float: right;
    right: 70px;
    position: absolute;
  


}
.row:after {
    content: "";
    display: table;
    clear: both;
  }

  .inline-block {
    display: inline-block;
  }
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<h2 style="font-size: 1.5em; margin-left: 40px; margin-top: 20px; color: white;">Home</h2>
<div matSubheader>
    <span style="font-size: 1.2em; margin-left: 20px; color: white;">My Workspaces</span>
    <button mat-stroked-button color="accent" matTooltip="New Workspace" (click)="newWorkspaceClick()">
        <mat-icon>add</mat-icon> New
    </button>
</div>

  <div class="column">
    <mat-nav-list>
        <div class="row">
                <div>
                  <mat-card class="example-card"><a mat-list-item routerLink="workspace/{{ws.guid}}" *ngFor="let ws of workspaces" >
                      <mat-icon matListIcon color
                          matTooltip="{{ws.type == WorkspaceType.user ? 'User Workspace' : 'Group Workspace'}}">
                          
                      </mat-icon>
                      <span matLine>Stack One</span>
                      <span matLine class="hint"></span>
                    </a>
  
                  </mat-card>
                  
                </div>       
        </div>
    </mat-nav-list>
  </div>
  
  <mat-divider [vertical]="true" class="divider"></mat-divider>
  <div style="position: absolute;font-size: 1.2em; right: 630px;top: 80px; color: white;"> Recently Edited Charts</div>
  <div class="column2">
    <mat-nav-list>
      <div class="row">
              <div>
          
              </div>       
      </div>
  </mat-nav-list>
  </div>

1 Ответ

1 голос
/ 13 марта 2020

Вам просто нужно добавить свойство margin-bottom CSS к вашей карте следующим образом: 

.mat-card:not(:last-child) {
  margin-bottom: 20px;
}

РЕДАКТИРОВАТЬ:

Я внимательно посмотрел на ваш код и заметил, что вы не создаете карты, вы создаете элементы списка внутри карты. Ваша директива ngFor помещена в тег a. Поместите директиву ngFor на карту или, если вы хотите создать элементы списка, добавьте следующий код: 

.mat-list-item:not(:last-child) {
  margin-bottom: 20px;
}
...