typescriptionic-frameworkuiactionsheet

How to add multiple line in ionic UIActionSheet?


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


Solution

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

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

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