css - ionicons - Ionic 2: ¿cómo hacer un botón de iones con el icono y el texto en dos líneas?

ionicons example

Question

LA SITUACIÓN :

En mi aplicación Ionic 2, necesito tener el botón de menú en dos líneas: icono y texto.

El problema es que de alguna manera la directiva de botones de iones obliga al botón a estar en una línea.

Necesito la directiva de botones iónicos para asegurarme de que el botón siempre tenga el formato y el posicionamiento correctos de manera receptiva. Solo necesito que ese botón esté en dos líneas.

Este es el html y css de mi intento:

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

EL CSS :

.menuSubTitle {

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

LA PREGUNTA :

¿Cómo puedo hacer un botón de iones en dos líneas?

¡Gracias!

Answer 1

Estás a lo largo de las líneas de escritura. Se necesita una pequeña modificación para que funcione.

Aquí está mi marcado:

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

El div interno dentro del botón es el truco. Lo único que se necesita para este marcado es configurar el label element to display block

Como <p> ya es un elemento de nivel de bloque. Puede funcionar solo como está.