html - 将黑条添加到 ionic 卡

Question

我有一个带标题(标题和副标题)的 ionic 卡，我需要在标题顶部添加一个黑色条。

<ion-list>
    <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events">
      <ion-card-header>                                      
        <ion-card-subtitle>{{event.date}}</ion-card-subtitle>
        <ion-card-title style="font-size:15px" text-wrap>{{event.title}}</ion-card-title>
      </ion-card-header>                        
    </ion-card>
</ion-list>

这就是我想要的:

这是我到目前为止得到的:

Answer 1

1- 确保将卡片标题填充设置为零

2- 添加一个 div 作为 card-header 中高度 > 0 的第一个元素，并将背景设置为黑色

Sample result for below code

<ion-list>
        <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events" >
          <ion-card-header style="padding: 0;">      
                <div style="height:15px;background:black;"></div>                  
            <ion-card-subtitle>{{event.date}}</ion-card-subtitle>
            <ion-card-title style="font-size:15px" text-wrap>{{event.title}}</ion-card-title>
          </ion-card-header>                        
        </ion-card>
    </ion-list>