我需要設計帶有單選按鈕的 ionic-alert。
默認設計如下所示：
但我需要單選按鈕從右到左。因此，我將 ths css 更改為direction: rtl;，它完成了作業，但圓形按鈕消失了，如下圖所示：
如何使用單選按鈕與文本右側的圓形按鈕從右到左對齊的離子警報？
uj5u.com熱心網友回復：
將此代碼添加到 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;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/386867.html
下一篇：離子中的自定義標簽欄