Ionic 2 - 如何制作两行带有图标和文本的离子按钮？

Question

情况：

在我的 Ionic 2 应用程序中，我需要将菜单按钮放在两行上：图标和文本。

问题在于 ion-button 指令以某种方式强制按钮位于一行。

我需要 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>

已经是一个块级元素。它可能会按原样工作。

Answer 2

这就能解决问题：

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

这会将元素顺序从水平更改为垂直。

Answer 3

如果你想让按钮更漂亮一点，你就必须改变按钮的高度。 （例如带有图标边距）

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

Answer 4

这不能正常工作。 似乎不可能覆盖按钮内部类。 在这里使用 ionic v7