ionic-framework - 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 将按钮的内容包装成一个 <span>具有类 .button-inner 的标签.所以当你检查 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类应用 flexbox 属性将文本和图标置于中央。您可以覆盖 justify-content 属性并将值从 center 更改为至 flex-start这将告诉内容(文本和图标)从框的开头开始。

示例

如果要将其应用于所有按钮

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

如果要将其应用于特定按钮(其中 .specific-button 作为类添加到按钮组件)

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