angular 卡片中的垂直部分
Vertical Section in angular card
我正在尝试复制垫卡布局,但还没有找到合适的词来搜索。我正在使用 angular 并且想要设置一个垫卡,它在左侧有一个垂直部分,这样我就可以放置一个以该部分线为中心的徽标。我已经包含了我正在尝试重新创建的示例图像。 example card
我的名片
<div class="container">
<div class="flex-container" fxLayout="row">
<mat-card>
<aside>
</aside>
<mat-card-header>
<mat-card-title>{{project.name | uppercase}}</mat-card-title>
<mat-card-subtitle>{{project.location}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<section>
Last Scan: {{project.lastScanDate | date: 'shortDate'}}
</section>
</mat-card-content>
</mat-card>
</div>
</div>
我尝试添加一个 "aside",但除非我包含文本,否则它不会显示。
这只是您想要的原始示例,您可以通过将图像 URL 放入 css 来更改图标图像想。根据您的需要更改内容。
.flex-container {background: #ccc; padding: 20px 0 0;border-radius: 5px; box-sizing: border-box; border-left: 25px solid #5243AA; min-height: 150px;}
mat-card {display: flex; flex-direction: column; justify-content: space-between;min-height: 150px; padding-left: 20px;}
mat-card-content {margin-left: -20px; background: #fff; padding: 10px; box-shadow: 1px 3px 7px -1px #ddd;}
mat-card-title {position: relative;}
mat-card-title:after {position: absolute; content: ""; height: 20px; width: 20px; left: -30px; top: 0; background-image: url(https://img.favpng.com/21/1/24/arrow-icon-circle-icon-direction-icon-png-favpng-Lmfw1dQK3ZtSWQX1kUmGXEPVh.jpg); background-size: cover;}
<div class="container">
<div class="flex-container" fxLayout="row">
<mat-card>
<mat-card-header>
<mat-card-title>{{project.name | uppercase}}</mat-card-title>
</mat-card-header>
<mat-card-subtitle>{{project.location}}</mat-card-subtitle>
<mat-card-content>
<section>
Last Scan: {{project.date | date: 'shortDate'}}
</section>
</mat-card-content>
</mat-card>
</div>
</div>
我正在尝试复制垫卡布局,但还没有找到合适的词来搜索。我正在使用 angular 并且想要设置一个垫卡,它在左侧有一个垂直部分,这样我就可以放置一个以该部分线为中心的徽标。我已经包含了我正在尝试重新创建的示例图像。 example card
我的名片
<div class="container">
<div class="flex-container" fxLayout="row">
<mat-card>
<aside>
</aside>
<mat-card-header>
<mat-card-title>{{project.name | uppercase}}</mat-card-title>
<mat-card-subtitle>{{project.location}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<section>
Last Scan: {{project.lastScanDate | date: 'shortDate'}}
</section>
</mat-card-content>
</mat-card>
</div>
</div>
我尝试添加一个 "aside",但除非我包含文本,否则它不会显示。
这只是您想要的原始示例,您可以通过将图像 URL 放入 css 来更改图标图像想。根据您的需要更改内容。
.flex-container {background: #ccc; padding: 20px 0 0;border-radius: 5px; box-sizing: border-box; border-left: 25px solid #5243AA; min-height: 150px;}
mat-card {display: flex; flex-direction: column; justify-content: space-between;min-height: 150px; padding-left: 20px;}
mat-card-content {margin-left: -20px; background: #fff; padding: 10px; box-shadow: 1px 3px 7px -1px #ddd;}
mat-card-title {position: relative;}
mat-card-title:after {position: absolute; content: ""; height: 20px; width: 20px; left: -30px; top: 0; background-image: url(https://img.favpng.com/21/1/24/arrow-icon-circle-icon-direction-icon-png-favpng-Lmfw1dQK3ZtSWQX1kUmGXEPVh.jpg); background-size: cover;}
<div class="container">
<div class="flex-container" fxLayout="row">
<mat-card>
<mat-card-header>
<mat-card-title>{{project.name | uppercase}}</mat-card-title>
</mat-card-header>
<mat-card-subtitle>{{project.location}}</mat-card-subtitle>
<mat-card-content>
<section>
Last Scan: {{project.date | date: 'shortDate'}}
</section>
</mat-card-content>
</mat-card>
</div>
</div>