如何在Ionic UIActionSheet中实现按钮文本多行显示？

实现思路 #

Ionic 原生 ActionSheet 按钮默认限制文本单行展示，\n属于字符串转义字符不会被解析为HTML换行，需要通过允许HTML内容注入+覆盖默认换行样式实现需求。 #

具体实现步骤 #

1. 修改逻辑代码，替换换行方式 #

将字符串拼接的\n替换为HTML换行标签<br/>，同时使用按钮配置的html字段代替原text字段，让内容可以被解析为HTML：

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

    return {
      // 用html字段代替text字段
      html: name,
      handler: () => {
        this.bookingSlot(slot);
      }
    };
  }
});

const actionSheet = await this.actionSheetController.create({
  header: 'Slots',
  // 添加自定义类名，避免样式全局污染
  cssClass: 'multi-line-slot-sheet',
  buttons
});

await actionSheet.present();
}

2. 新增样式覆盖默认单行限制 #

在全局样式文件（通常为global.scss）中添加如下样式，放开ActionSheet按钮的单行限制：

.multi-line-slot-sheet {
  .action-sheet-button-inner {
    // 允许文本换行
    white-space: normal !important;
    height: auto !important;
    // 调整内边距适配多行高度
    padding-block: 10px !important;
    align-items: flex-start !important;
  }
  .action-sheet-button-label {
    white-space: normal !important;
    // 调整行高保证可读性
    line-height: 1.5 !important;
  }
}

拓展方案（适合复杂排版需求） #

如果需要实现更丰富的按钮样式（比如不同行字号、颜色不一样，加图标等），可以使用Ionic ActionSheet的自定义内容插槽，传入自定义的Angular组件/<ng-template>实现完全自主的排版控制。

内容的提问来源于stack exchange，提问作者Louis Yoong