Ionic 2 将按钮标签向左对齐

Question

我在 Ionic 2 中创建了一个按钮，如下所示：

  <button secondary block round padding style="text-align : left;">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
  </button>

我正在尝试将按钮文本对齐到左侧，但它没有出现在那里。是否有可用的 twik 构建来实现这一点？

Answer 1

因为 Ionic 使用其 class 生成默认值 css。所以你应该使用 SASS 来自定义 CSS .

例如：

<button class="item">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
     Login
  </button>

文件styles.scss

.item{
   @extend secondary;
   @extend block;
   text-align : left;
}

Answer 2

您可以在 button 标签内使用 item-left 属性。不需要 class="" 或 style="".

<button secondary block round padding item-left>
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
</button>

更多信息here

Answer 3

Ionic 将按钮的内容包装到具有 class .button-inner 的 <span> 标签中。因此，当您检查 HTML 标记时，它看起来像这样

<button secondary block round padding>
    <span class="button-inner">            
        <ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
        Login
    </span>    
    <ion-button-effect></ion-button-effect>
</button>

.button-inner class 应用 flexbox 属性将文本和图标置于中央。您可以覆盖 justify-content 属性并将值从 center 更改为 flex-start 这将告诉内容（文本和图标）从框的开头开始.

例子

如果你想将它应用到所有按钮

.button-inner{
    justify-content:flex-start;
}

如果您想将它应用到特定按钮（其中 .specific-button 作为 class 添加到按钮组件）

.specific-button .button-inner{
     justify-content:flex-start;
}

Ionic 2 将按钮标签向左对齐

Ionic 2 Align Button Label to left

ionic-framework

ionic2