Question

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

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

我正在尝试将按钮文本对齐到左侧，但它不会到达那里。有没有可用于实现这一目标？

Answer 1

Ionic将按钮的内容包装到<span>标记中，该标记具有类.button-inner。因此，当您检查HTML标记时，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; }

Answer 2

因为Ionic使用它的类生成默认的css。所以你应该使用SASS来自定义CSS。

例如：

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

file styles.scss

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

Answer 3

您可以使用item-left - 标记内的button属性。无需class=""或style=""。

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

更多信息here

Ionic 2将按钮标签对齐到左侧

3 个答案: