イオン2整列ボタンのラベルは、次のように私はイオン2でボタンを作成し

Question

左へ：私は左側にボタンのテキストを整列するためにしようとしていますが、そのが来ていない

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

。それを実現するためにtwikが構築されていますか？

Answer 1

イオンは、クラス.button-innerを有する<span>タグにボタンの内容をラップします。あなたはそれ

<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> 

を調べるときにHTMLマークアップは次のようになります.button-innerクラスは、テキストとアイコンの中央に配置するフレキシボックスのプロパティを適用します。 justify-contentプロパティを上書きし、値をcenterからflex-startに変更すると、内容（テキストとアイコン）がボックスの先頭から開始されます。

例

あなたは（.specific-buttonがボタンコンポーネントをクラスとして追加された）特定のボタンにそれを適用したい場合は、すべてのボタン

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

にそれを適用したい場合

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

Answer 2

IonicはそのクラスがデフォルトのCSSを生成するので、ですから、CSSをカスタマイズするにはSASSを使うべきです。例えば

：

<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 3

あなたは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