angular 卡片中的垂直部分

Question

我正在尝试复制垫卡布局，但还没有找到合适的词来搜索。我正在使用 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"，但除非我包含文本，否则它不会显示。

Answer 1

这只是您想要的原始示例，您可以通过将图像 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 卡片中的垂直部分

Vertical Section in angular card

angular

mat-card