-2

我正在尝试复制一个 mat-card 布局，但还没有找到合适的词来搜索。我正在使用 angular 并且想要设置一个在左侧有一个垂直部分的 mat-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>

我尝试添加一个“旁白”，但除非我包含文本，否则它不会出现。

4

1 回答 1

0

这只是您想要的一个原始示例，您可以通过将图像 URL 放入 css 来更改图标图像，所以这只是一个 iea 如何做您想做的事情。根据您的需要更改内容。

.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>

于 2020-05-28T19:10:16.887 回答