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

问题描述

我用IONIC-2 Beta版制作一个应用程序。我使用Checkbox Alert Controller，并添加两个按钮Okay和Cancel，现在我需要在Alert Controller中再添加一个按钮。我在下面实现添加一个按钮。

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.

谢谢。

推荐答案

您可以使用一些css规则来实现这一目标。

You can use a few css rules to achieve that.

由于使用flexbox对齐按钮，我们可以覆盖其中的一些css规则可以在模态中包含三个按钮而不是两个。首先，请注意我在警报中添加了自定义css类（ custom-alert ），因此我们的css规则将仅影响此警报 ：

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',
      ...
});

然后：

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

通过设置宽度来完成魔术/ code>到33.33％允许按钮放在同一行，然后将 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屋！