首页 文章

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

提问于
浏览 次
9

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

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

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

ionic-framework ionic2

3 回答

  • 0

    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 ，这将告诉内容（文本和图标）从框的开头开始 .

    Example

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

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

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

    .specific-button .button-inner{
     justify-content:flex-start;
}
    回复于
  • 0

    因为Ionic使用它的类生成默认的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;
}
    回复于
  • 23

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

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

    更多信息here

    回复于

相关问题