在离子卡上添加黑条

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的卡片标题中的第一个元素，并将背景设置为黑色

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>

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