ion-item 减少端槽的宽度

Question

我需要让我的列表项的末尾插槽占用更少的宽度，以便我可以使第一个插槽中的名称更长。

目前它占据了大约 50% 的宽度并且浪费了空间。

<ion-list *ngIf="!isLoading">
  <ion-item *ngFor="let trail of trails" #defectReport (click)="onViewTrailDetails(trail)">

    <fa-icon class="icon icon-center status-open-icon" *ngIf="trail.status === trailStatus.Open" slot="start" [icon]="['fas', 'check-circle']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-closed-icon" *ngIf="trail.status === trailStatus.Closed" slot="start" [icon]="['fas', 'times-circle']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-new-icon" *ngIf="trail.status === trailStatus.New" slot="start" [icon]="['fas', 'burn']" size="2x"></fa-icon>
    <fa-icon class="icon icon-center status-under-construction-icon" *ngIf="trail.status === trailStatus.UnderConstruction" slot="start" [icon]="['fas', 'exclamation-triangle']" size="2x"></fa-icon>

    <ion-label class="first-item-label">
      <span><h2 class="heading">{{trail.name}}</h2></span>
      <p class="label-text">{{trail.status}}</p>
    </ion-label>
    <ion-label slot="end" class="second-item-label">
      <p class="sub-heading">{{trail.statusNotes}}</p>
      <p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
    </ion-label>
  </ion-item>
</ion-list>

Answer 1

我最终使用了 ion-note。它导致了一些格式问题，但解决了我的问题。 https://ionicframework.com/docs/api/note

    <ion-note slot="end" class="second-item-label" [ngClass]="{'margin-top-auto': !trail.statusNotes}">
      <p class="sub-heading">{{trail.statusNotes}}</p>
      <p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
    </ion-note>