web-dev-qa-db-ja.com

Ionic 2-2行のアイコンとテキストでイオンボタンを作成するには？

状況：

私のIonic 2アプリでは、アイコンとテキストの2行にメニューボタンが必要です。

問題は、何らかの方法でイオンボタンディレクティブがボタンを強制的に1行にすることです。

ボタンが常に適切なフォーマットと応答性を持っていることを確認するには、ion-buttonディレクティブが必要です。このボタンが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;
    }

質問：

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

ありがとう！

cssionic-frameworkionic2
9
FrancescoMussi

あなたは正しい線に沿っています。動作させるには、わずかな修正が必要です。

これが私のマークアップです。

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

内部 <div>内<button>はトリックです。このマークアップに必要なことは、<label>要素からdisplay: block。

<p>はすでにブロックレベルの要素です。そのまま動作する場合があります。

18
C_Ogoo

これはトリックを行います：

.button-inner {
  flex-flow: column;
}

これにより、要素の順序が水平から垂直に変更されます。

2
Nino Škopac

少しきれいにしたい場合は、ボタンの高さを変更する必要があります。 （例：アイコンマージンあり）

.button-icon-top {
  height: 5em;
  .button-inner {
    flex-flow: column;

    .icon {
      margin-bottom: 10px;
      font-size: 2em;
    }
  }
}

クラス名をボタンに追加するだけです。

<button ion-button full large class="button-icon-top">
  <ion-icon name="logo-Twitter"></ion-icon>
  <span>Click me</span>
</button>
0
Dominik