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

Posted 2023-03-05

【中文标题】带有从右到左单选按钮的离子警报

【英文标题】：ionic alert with right to left radio buttons

【发布时间】：2022-01-18 14:04:43

【问题描述】：

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

默认设计如下所示：

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

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

【参考方案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;