Angular 材料卡布局
Angular Materials Cards Layout
我正在使用 Angular Mat Card,我有一个按钮,每次单击该按钮都会在数据库中创建新卡片,但新卡片显示在现有卡片的底部,没有任何间隙介于两者之间,所以如果你们能帮我弄清楚如何制作 gap/margins 那就太棒了。谢谢
This is what it look like right now
This is what I want to look like
.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>
你只需要像这样在你的卡中添加 margin-bottom CSS 属性:
.mat-card:not(:last-child) {
margin-bottom: 20px;
}
编辑:
我仔细查看了您的代码,发现您不是在创建卡片,而是在卡片内部创建列表项。您的 ngFor
指令位于 a
标签上。将 ngFor
指令放在卡片上,或者如果要创建列表项,请添加以下代码:
.mat-list-item:not(:last-child) {
margin-bottom: 20px;
}
我正在使用 Angular Mat Card,我有一个按钮,每次单击该按钮都会在数据库中创建新卡片,但新卡片显示在现有卡片的底部,没有任何间隙介于两者之间,所以如果你们能帮我弄清楚如何制作 gap/margins 那就太棒了。谢谢
This is what it look like right now
This is what I want to look like
.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>
你只需要像这样在你的卡中添加 margin-bottom CSS 属性:
.mat-card:not(:last-child) {
margin-bottom: 20px;
}
编辑:
我仔细查看了您的代码,发现您不是在创建卡片,而是在卡片内部创建列表项。您的 ngFor
指令位于 a
标签上。将 ngFor
指令放在卡片上,或者如果要创建列表项,请添加以下代码:
.mat-list-item:not(:last-child) {
margin-bottom: 20px;
}