How to add multiple line in ionic UIActionSheet?-CodePudding

Need help on this, How do add multiple lines in ionic UIActionSheet? I tried add '/n' but it cannot work at detail.ts file.

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

Here is the example of current ui looks enter image description here

This is the ui I wanna try to archive enter image description here

CodePudding user response：

You won't be able to do this from what I see in the source. As you can see in the link below, the ActionSheet Button accepts a string type.

Have you considered trying something similar with the modal component? This would support your UX needs.