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