イオン2 - アイコンとテキストの2つの線でイオンボタンを作る方法？

Question

SITUATION：アイコンとテキスト：私のイオン2のアプリで

私は2本のライン上のメニューボタンを持っている必要があります。

イオン・ボタン・ディレクティブが何らかの理由でボタンを1行に強制してしまう問題があります。

イオンボタンディレクティブを使用すると、ボタンが常に適切な書式設定と位置付けをするようにする必要があります。 ボタンを2行にするだけです。

この私の試みのHTMLとCSS：

HTML：

<ion-header> 
    <ion-navbar> 
     <button ion-button menuToggle="left" start> 
     <ion-icon name="menu"></ion-icon> <br /> 
     <p class="menuSubTitle">MENU</p> 
    </button> 
    <ion-title> 
     HomePage 
    </ion-title> 
     <button ion-button menuToggle="right" end> 
     <ion-icon name="person"></ion-icon> <br /> 
     <p lass="menuSubTitle">LOGIN</p> 
    </button> 
    </ion-navbar> 
</ion-header> 

CSS：

.menuSubTitle { 

     font-size: 0.6em; 
     float:left; 
     display: block; 
     clear: both; 
    } 

QUESTION：

イオンボタンを2行にするにはどうすればいいですか？

ありがとうございます！

Answer 1

あなたは書き込み線に沿っています。それを動作させるにはわずかな変更が必要です。

<button ion-button block color="menu-o"> 
    <div> 
     <ion-icon name="flash"></ion-icon> 
     <label>Flash</label> 
    </div> 
</button> 

ボタン内部の内側のdiv要素がトリックです：

は、ここに私のマークアップです。このマークアップに必要なのは、label element to display block

です。<p>は既にブロックレベルの要素です。そのまま動作するかもしれません。