web-dev-qa-db-fra.com

quelle est la bonne façon d'insérer une étiquette dans une liste Ionic FAB

je veux insérer une étiquette qui corresponde à chaque icône FAB de la liste Fab, quelle que soit la manière correcte de le faire. la façon dont je l'ai fait ça ne marche pas

<ion-fab left middle>
  <button ion-fab color="dark">
    <ion-icon name="arrow-dropup"></ion-icon>
    <ion-label>here</ion-label>
  </button>
  <ion-fab-list side="top">
    <button ion-fab>
      <ion-icon name="logo-facebook"></ion-icon>
      <ion-label>here</ion-label>
    </button>
    <button ion-fab>
      <ion-icon name="logo-Twitter"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-vimeo"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-googleplus"></ion-icon>
    </button>
  </ion-fab-list>
</ion-fab>

ionic-frameworkionic2ionic-view
19
muzi jack

ross solution est excellent, mais pour que cela fonctionne sur Ionic v2, je devais changer la classe .fab fournie avec Ionic de contain: strict à contain: layout.

Voici comment la classe est à l'origine:

.fab {
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 0;
    display: block;
    overflow: hidden;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 56px;
    text-align: center;
    text-overflow: Ellipsis;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color, opacity 100ms linear;
    background-clip: padding-box;
    -webkit-font-kerning: none;
    font-kerning: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    contain: strict;
}

Ajoutez donc ce qui suit sur votre fichier .scss:

.fab {
    contain: layout;
}

Il écrasera la classe par défaut .fab pour la page et cela fonctionnera.

29
paulovitorjp

Pour ce que ça vaut, j'ai pu accomplir ce que vous demandez avec le SCSS suivant.

Ce serait bien si cela était directement supporté par Ionic, mais je ne trouve rien qui indique que cela est intégré.

    button[ion-fab] {
        overflow: visible;
        position: relative;

        ion-label {
            position: absolute;
            top: -8px;
            right: 40px;

            color: white;
            background-color: rgba(0,0,0,0.7);
            line-height: 24px;
            padding: 4px 8px;
            border-radius: 4px;
        }
        contain: layout;
    }

 enter image description here

45
ross

La réponse choisie semblait fonctionner la plupart du temps, mais sur certains appareils iOS, elle ne relevait pas le paramètre contain: layout;, rendant l'étiquette non alignée. Je n'avais pas besoin de mon étiquette en tant que partie du bouton cliquable, donc mon ajout d'étiquette FAB est ci-dessous, ce qui fonctionne sur iOS. Assez simple.

HTML

<ion-fab top right Edge>
    <button ion-fab color="primary">
        <ion-icon name="add"></ion-icon>
    </button>
    <ion-label>Scan</ion-label>
</ion-fab>

CSS

ion-fab ion-label {
    font-weight: bold;
    color: color($colors, primary, base);
    text-align: center;
    margin: 0px !important;
}
0
BRass