带有从右到左单选按钮的离子警报答案

【问题标题】：ionic alert with right to left radio buttons带有从右到左单选按钮的离子警报
【发布时间】：2022-01-18 14:04:43
【问题描述】：

我需要设计带有单选按钮的 ionic-alert。

默认设计如下所示：

但我需要单选按钮从右到左。因此，我将 css 更改为 direction: rtl;，它完成了这项工作，但圆形按钮消失了，如下图所示：

如何让带有单选按钮的 ionic-alert 与文本右侧的圆形按钮从右到左对齐？

【问题讨论】：

标签： ionic-framework radio-button

【解决方案1】：

将此代码添加到global.scss

.my-custom-class {
  direction: rtl;
  .alert-radio-icon.sc-ion-alert-md {
    right: 26px;
  }
}

使用 alertController 显示单选列表

async presentAlertRadio() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Radio',
      inputs: [
        {
          name: 'radio1',
          type: 'radio',
          label: 'Radio 1',
          value: 'value1',
          handler: () => {
            console.log('Radio 1 selected');
          },
          checked: true,
        },
        {
          name: 'radio2',
          type: 'radio',
          label: 'Radio 2',
          value: 'value2',
          handler: () => {
            console.log('Radio 2 selected');
          },
        },
        {
          name: 'radio3',
          type: 'radio',
          label: 'Radio 3',
          value: 'value3',
          handler: () => {
            console.log('Radio 3 selected');
          },
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          },
        },
        {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
          },
        },
      ],
    });

    await alert.present();
  }

如果显示单选按钮和标签从左到右应用以下代码

    .my-custom-class {
      direction: rtl;
      .alert-radio-icon.sc-ion-alert-md {
        right: 26px;
      }
      .my-custom-class{
          direction: ltr;
      }
    }

【讨论】：