html - 将黑条添加到离子卡

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>

这就是我要的：

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

标签： htmlcssionic4

Answer 1

1-确保将卡头填充设置为零

2-添加一个div作为card-header中的第一个元素，高度> 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>