离子2 - 如何在两条线上制作带有图标和文字的离子按钮？

Question

情况:

在我的Ionic 2应用程序中,我需要将菜单按钮分为两行:图标和文本.

问题是,离子按钮指令以某种方式迫使按钮在一条线上.

我需要使用ion-button指令来确保按钮始终具有正确的格式和响应位置.我只需要两个按钮就可以了.

这是我尝试的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;
}

问题:

如何在两条线上制作离子按钮？

谢谢!

Answer 1

你是沿着正确的路线.它需要稍作修改才能工作.

这是我的标记:

<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>已经是块级元素.它可能只是按原样工作.