将黑条添加到 ion-card

Question

我有一个带有 header（标题和副标题）的 ion-card，我需要在 header 的顶部添加一个黑条。

<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- 确保将卡 header 填充设置为零

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>

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

将黑条添加到 ion-card

Add black bar to an ion-card

html

css

ionic4