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可用于实现这一目标？

- Prerak Tiwari

---

当你说对齐时，是指完全将文本与按钮边缘左侧对齐，还是只交换图标和文本位置，使文本在左侧居中，图标在右侧居中？ - Will.Harris

@Will.Harris 当我说对齐时，我的意思是完全将文本与按钮边缘左对齐。 - Prerak Tiwari

图标应该放在哪里，例如保持在中心/向右推出/仅在文本结束的一侧？ - Will.Harris

我想要图标在左侧，紧接着是文本。 - Prerak Tiwari

Answer 1

Ionic将按钮内容封装在一个带有类名为.button-inner的<span>标签中。因此，当您进行检查时，HTML标记看起来像这样：

Ionic将按钮内容封装在一个带有类名为.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类应用了flexbox属性来使文本和图标居中。您可以覆盖justify-content属性，并将值从center更改为flex-start，这将告诉内容（文本和图标）从框的开始位置开始。

示例

如果您想将其应用于所有按钮

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

如果您想将其应用于特定按钮（其中.specific-button被添加为按钮组件的类别）

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

- Will.Harris

---

正是我正在寻找的东西。 - Prerak Tiwari

我在Ionic 3中按照答案的描述使其正常工作，但现在在Ionic 4中似乎不再起作用。 - S. Baggy

@S.Baggy，你最终解决了吗？我找到了这个链接https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4，这是否意味着实现它的唯一方法是创建一个新的按钮组件？ - Camilo Casadiego

@CamiloCasadiego 抱歉，我现在不记得了。过去半年里，我已经转移到其他领域了，不再从事移动应用程序的开发。 - S. Baggy

@S.Baggy，至少在我的应用程序的下一个版本中，我将放弃使用Ionic。 - Camilo Casadiego

Answer 2

因为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;
}

- nahoang

---

我认为你应该阅读这个主题：http://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/ - nahoang

Answer 3

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

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

更多信息在这里

- John