web-dev-qa-db-fra.com

Ionic 2 - comment créer un bouton ionique avec une icône et un texte sur deux lignes?

LA SITUATION :

Dans mon application Ionic 2, le bouton de menu doit être sur deux lignes: icône et texte.

Le problème est que la directive sur les boutons d'ions oblige le bouton à se trouver sur une seule ligne.

J'ai besoin de la directive ion-bouton pour m'assurer que le bouton a toujours la bonne mise en forme et le positionnement en conséquence ..__ J'ai juste besoin que ce bouton soit sur deux lignes.

C'est le html et le css de ma tentative:

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

LE CSS :

.menuSubTitle {

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

LA QUESTION :

Comment puis-je faire un bouton d'ion sur deux lignes? 

Merci!

cssionic-frameworkionic2
8
FrancescoMussi

Vous êtes dans les bonnes lignes. Une légère modification est nécessaire pour que cela fonctionne.

Voici mon balisage:

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

Le <div> intérieur du <button> est le truc. La seule chose nécessaire pour ce balisage est de définir l'élément <label> sur display: block.

Depuis <p> est déjà un élément de niveau bloc. Cela peut simplement fonctionner tel quel.

14
C_Ogoo

Ça fera l'affaire:

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

Cela changera l'ordre des éléments de l'horizontale à la verticale.

0
Nino Škopac