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

Question

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

默认设计如下所示：

但我需要单选按钮从右到左。所以我将 css 更改为 direction: rtl; 并且它完成了工作但是圆圈按钮消失了，如下图所示：

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

Answer 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;
      }
    }

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

ionic alert with right to left radio buttons

radio-button

ionic-framework