复选框警报控制器 - 添加 3 个按钮 [英] Checkbox Alert Controller - Add 3 Buttons

问题描述

I make one application with IONIC-2 Beta version. i 'm use Checkbox Alert Controller, and add two buttons "Okay" And "Cancel", Now i need to add one more button in Alert Controller. i implement below to add one more button.

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

It's work good but it will align vertically like below,

But, i want to align it in horizontally.

If anyone knows the solution, please help me.

Thanks.

解决方案

You can use a few css rules to achieve that.

Since the buttons are being aligned by using flexbox, we can overwrite some of those css rules to be able to include three buttons in the modal instead of two. First, please notice that I added a custom css class (custom-alert) to the alert, so our css rules will affect this alert only:

let alert = this.alertCtrl.create({
      cssClass: 'custom-alert',
      ...
});

And then:

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

The magic is being done by setting the width to 33.33% to allow the buttons to fit in the same row, and then adding flex-direction: row to the container instead of the column value per default (that's why in your screenshot the buttons are in a column display).

这篇关于复选框警报控制器 - 添加 3 个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！