如何在离子 UIActionSheet 中添加多行？

Question

需要帮助，如何在 ionic UIActionSheet 中添加多行？我尝试添加 '/n' 但它无法在 detail.ts 文件中工作。

    <ion-button expand="full" shape="round" class="ion-margin" *ngIf="facility.bookable" (click)="showSlots()">
          Booking Now
      </ion-button>


    public async showSlots() {
      const buttons = this.facility.slot.map((slot) => {
      if (slot.availability > 0) {
        let name = slot.name;
        if (slot.price !== '0.00') {
          name = `${name} - RM${slot.price}` + '\n' + `${slot.start_time} - ${slot.end_time}`;
        }

        return {
          text: name,
          handler: () => {
            this.bookingSlot(slot);
          }
        };
      }
    });

    const actionSheet = await this.actionSheetController.create({
      header: 'Slots',
      buttons
    });

    await actionSheet.present();
 }

这是当前 ui 造型的示例 enter image description here

这是ui我想尝试存档 enter image description here

Answer 1

您将无法执行此操作from what I see in the source。从下面突出显示的源代码中可以看出，ActionSheet 按钮接受字符串类型。

export interface ActionSheetButton {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  handler?: () => boolean | void | Promise<boolean | void>;
}

您是否考虑过使用 modal component 尝试类似的东西？这将支持您的用户体验需求。

如何在离子 UIActionSheet 中添加多行？

How to add multiple line in ionic UIActionSheet?

uiactionsheet

typescript

ionic-framework