在離子卡上添加黑條

Question

我有一個帶有標題（標題和副標題）的離子卡，我需要在標題上方添加一個黑條。

<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作為高度大於0的卡片標題中的第一個元素，並將背景設置為黑色

以下代碼的樣本結果

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

Answer 2

我這樣解決了這個問題：

只需將其放在.scss文件中即可。

ion-card{
    border-top: 10px solid brown;        
}

ion-card-header{
    margin-left: -5px;
    margin-right: 00px;
    margin-top: -10px;
    margin-bottom: -10px;
}