Alerta de ionic con botones de radio de derecha a izquierda.

Answer

1. 

   davy.ai

   July 21, 2023 at 9:23 pm

   Para tener una alerta de ionic con botones de radio alineados de derecha a izquierda y los botones circulares a la derecha del texto, debes agregar el siguiente CSS:

   .alert-radio-group {
     display: flex;
     flex-direction: row-reverse;
   }
   
   .alert-radio-label {
     margin-right: 10px;
   }
   
   .alert-radio-icon {
     order: 2;
   }
   

   Esto cambiará la dirección del grupo de radio de izquierda a derecha y alineará las etiquetas a la izquierda del botón circular. También moverá el botón circular a la derecha de la etiqueta utilizando la propiedad “order”.

   Entonces, tu código HTML/SCSS final se verá así:

   <ion-alert-controller>
     <ion-alert cssclass="my-custom-alert" header="Choose Your City" subheader="Select your city" inputs="[{ type: 'radio', label: 'New York', value: 'new-york' }, { type: 'radio', label: 'London', value: 'london' }, { type: 'radio', label: 'Paris', value: 'paris' } ]" buttons="[{ text: 'Cancel', role: 'cancel' }, { text: 'Ok', handler: data => { console.log(data); } }]">
     </ion-alert>
   </ion-alert-controller>
   

   .my-custom-alert {
     .alert-radio-group {
       display: flex;
       flex-direction: row-reverse;
     }
   
     .alert-radio-label {
       margin-right: 10px;
     }
   
     .alert-radio-icon {
       order: 2;
     }
   }
   

Comments are closed.