Question

使用IonicFramework，我试图对齐$ ionicActionSheet按钮的内容。

此外，我希望包装器居中（默认情况下），并且内部的两个具有预定义的宽度，使得图标和文本左对齐（但在包装器中居中）。

我尝试了以下操作，但它没有改变任何东西，而且，它说在中心对齐。

CSS

span.tab-action{
    padding: 0 10px;
}

i.icon-action{
  width: 150px;
  text-align: left !important;
}
i.text-action{
  width: 350px;
  text-align: left !important;
}

$ ionicActionSheet

//
//
// Actionsheet
$ionicActionSheet.show({
          buttons: [
            { text: '<i class="ion-social-facebook icon-button icon-action" ></i>    <span class="tab-action"></span>     <i class="text-action">Facebook</i> ' }, 
            { text: '<i class="ion-social-instagram icon-button icon-action" ></i>   <span class="tab-action"></span>        <i class="text-width">Instagram</i> ' }, 
            { text: '<i class="ion-social-whatsapp icon-button icon-action" ></i>    <span class="tab-action"></span>        <i class="text-width">Whatsapp</i> ' }, 
            { text: '<i class="ion-more icon-button icon-action" ></i>               <span class="tab-action"></span>        <i class="text-width">More</i> ' }, 
            ],
          titleText: 'Share', 
          cancelText: 'Cancel',
          cancel: function() {
              // todo
          },
          buttonClicked: function(buttonIndex) {
              // todo
              return true;
          }
        })

Answer 1

您可以使用自定义class：cssClass。

$ionicActionSheet.show({
      buttons: [
    { text: '<i class="ion-social-facebook icon-button icon-action"></i><span class="tab-action"></span> <i class="text-action">Facebook</i> ' },
    { text: '<i class="ion-social-instagram icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">Instagram</i> ' },
    { text: '<i class="ion-social-whatsapp icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">Whatsapp</i> ' },
    { text: '<i class="ion-more icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">More</i> ' },
    ],
      titleText: 'Share',
      cancelText: 'Cancel',
      cssClass: 'social-actionsheet',
      cancel: function() {
      // todo
      },
      buttonClicked: function(buttonIndex) {
      // todo
      return true;
      }
})

并定义这种风格：

.social-actionsheet .action-sheet .button
{
    padding: 0 10px;
    text-align: left !important;
}

.social-actionsheet .action-sheet .button .text-action
{
    margin-left: 30px;
}

.social-actionsheet .action-sheet .button .text-width
{
    margin-left: 50px;
}

对齐ionicActionsheet内容

1 个答案: