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

THE SITUATION:

情况：

In my Ionic 2 app I need to have the menu button on two lines: icon and text.

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

The problem is that somehow the ion-button directive force the button to be on one line.

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

I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively. I just need that button to be on two lines.

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

This the html and css of my attempt:

这是我尝试的html和css：

THE HTML:

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>

THE CSS:

CSS：

.menuSubTitle {

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

THE QUESTION:

问题：

How can I make a ion-button on two lines?

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

Thanks!

谢谢！

1 个解决方案

#1

You are along the write lines. A slight modification is needed for it to work.

你是沿着写行。它需要稍作修改才能工作。

Here is my markup:

这是我的标记：

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

The inner div inside the button is the trick. The only thing needed for this markup is to set the label element to display block

按钮内的内部div是技巧。此标记唯一需要的是将label元素设置为display block

Since <p> is already a block level element. It may just work as is.

因为

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

#1