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

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>

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

3 个答案: