复选框警报控制器 - 添加 3 个按钮
Checkbox Alert Controller - Add 3 Buttons
我用 IONIC-2 Beta 版做了一个申请。我使用 Checkbox Alert Controller,并添加了两个按钮 "Okay" 和 "Cancel",现在我需要在 Alert Controller 中添加一个按钮。我在下面实现以添加一个按钮。
alert.addButton('Cancel');
alert.addButton({
text: 'Info',
role: 'info',
handler: data => {
//this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
}
});
alert.addButton({
text: 'Okay',
handler: data => {
this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
}
});
效果不错,但会像下面这样垂直对齐,
但是,我想水平对齐它。
有知道解决办法的请帮帮我
谢谢。
请看下面的代码
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm purchase',
message: 'Do you want to buy this book?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Buy',
handler: () => {
console.log('Buy clicked');
}
},
{
text: 'get',
handler: () => {
console.log('Buy clicked');
}
}
]
});
alert.present();
}
To get a button in horizontal we need all the button inside a single
array
But in your case you have 3 different array.
有关 AlerControll 的更多信息,请查看此 link
您可以使用一些 css 规则来实现。
由于按钮是使用 flexbox 对齐的,我们可以覆盖其中一些 css 规则,以便能够在模式中包含三个按钮而不是两个。首先,请注意我在警报中添加了自定义 css class (custom-alert
),因此我们的 css 规则将仅影响此警报 :
let alert = this.alertCtrl.create({
cssClass: 'custom-alert',
...
});
然后:
.custom-alert button.alert-button-group {
width: 33.33%;
}
.custom-alert .alert-button-group .button-inner {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-alert .alert-button-group-vertical {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row ;
}
魔术是通过将 width
设置为 33.33% 以允许按钮适合同一行,然后将 flex-direction: row
添加到容器而不是 column 默认值(这就是为什么在您的屏幕截图中按钮显示在列中的原因)。
我用 IONIC-2 Beta 版做了一个申请。我使用 Checkbox Alert Controller,并添加了两个按钮 "Okay" 和 "Cancel",现在我需要在 Alert Controller 中添加一个按钮。我在下面实现以添加一个按钮。
alert.addButton('Cancel');
alert.addButton({
text: 'Info',
role: 'info',
handler: data => {
//this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
}
});
alert.addButton({
text: 'Okay',
handler: data => {
this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
}
});
效果不错,但会像下面这样垂直对齐,
但是,我想水平对齐它。
有知道解决办法的请帮帮我
谢谢。
请看下面的代码
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm purchase',
message: 'Do you want to buy this book?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Buy',
handler: () => {
console.log('Buy clicked');
}
},
{
text: 'get',
handler: () => {
console.log('Buy clicked');
}
}
]
});
alert.present();
}
To get a button in horizontal we need all the button inside a single array
But in your case you have 3 different array.
有关 AlerControll 的更多信息,请查看此 link
您可以使用一些 css 规则来实现。
由于按钮是使用 flexbox 对齐的,我们可以覆盖其中一些 css 规则,以便能够在模式中包含三个按钮而不是两个。首先,请注意我在警报中添加了自定义 css class (custom-alert
),因此我们的 css 规则将仅影响此警报 :
let alert = this.alertCtrl.create({
cssClass: 'custom-alert',
...
});
然后:
.custom-alert button.alert-button-group {
width: 33.33%;
}
.custom-alert .alert-button-group .button-inner {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-alert .alert-button-group-vertical {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row ;
}
魔术是通过将 width
设置为 33.33% 以允许按钮适合同一行,然后将 flex-direction: row
添加到容器而不是 column 默认值(这就是为什么在您的屏幕截图中按钮显示在列中的原因)。