离子项目减少端槽的宽度

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>

Answer 2

ion-item是一个flex容器，ion-label的风格为flex-grow: 1。

我所做的是将第一个设置为flex-grow: 2，导致标签的响应比例为2 / 3、1 / 3。

在您的情况下，只需将其添加到CSS：

.first-item-label {
    flex-grow: 2;
}

如果您希望最后一个标签的宽度固定，请执行以下操作：

.second-item-label {
    flex: 0 0 80px;
}