Вертикальный разрез в карточке angular - PullRequest
Новая
       29

Вертикальный разрез в карточке angular

0 голосов
/ 28 мая 2020

Я пытаюсь продублировать макет циновки и пока не нашел нужных слов для поиска. Я использую angular и хочу настроить мат-карту с вертикальным разрезом с левой стороны, что позволяет мне поставить lo go по центру линии сечения. Я включил образец изображения, которое пытаюсь воссоздать. пример карты

Моя карта 

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

Я пробовал добавить «в сторону», но это не отображается, если я не добавляю текст.

1 Ответ

0 голосов
/ 28 мая 2020

это всего лишь пример того, что вы хотите, вы можете изменить изображение значка, поместив 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>
...