web-dev-qa-db-ja.com

Ionic 2ボタンのラベルを左に揃えます

Ionic 2に次のようにボタンを作成しました：

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

ボタンのテキストを左側に揃えようとしていますが、そこにはありません。それを達成するために利用可能な組み込みのtwikはありますか？

ionic-frameworkionic2
12
Prerak Tiwari

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;
}
27
Will.Harris

button-タグ内でitem-left属性を使用できます。 class=""またはstyle=""は必要ありません。

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

詳細 ここ

0
John

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;
}
0
nahoang