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>

- MadMac

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>

- MadMac

---

它可以工作，但ion-note的样式与ion-label的样式不同。如果您想获得与较小的ion-label相同的结果，您可能需要在行内修复您的样式。 - Pouria Moosavi

Answer 2

我建议使用以下方法。只需更改/重置标签元素的flex样式，因为它是一个弹性布局。

ion-label[slot='end'] {
  flex: unset;
  text-align: end;
}

属性text-align: end是可选的，与问题无关。但在我看来，项目的右侧应该右对齐，特别是输入字段。

您可以使用任何元素。但是，ion-label具有一些预定义的样式，与框架协调一致。而ion-note会更改字体大小（在md样式中）。

更新：这将在即将推出的Ionic版本中修复（可能是Ionic 6）。随着此更改，在slot="end"上不再设置flex: 1。

- Domske

Answer 3

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

- Mart