ionic-framework - img - show image ionic

¿Cuál es la forma correcta de insertar una etiqueta en una lista FON iónica?

Question

Quiero insertar una etiqueta para que coincida con cada ícono FAB en la lista de Fab, cuál es la forma correcta de hacerlo. la forma en que lo hice no funciona

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

Answer 1

La respuesta elegida pareció funcionar la mayor parte del tiempo, pero en algunos dispositivos iOS no detectaba el contain: layout; ajuste, haciendo que la etiqueta no se alinee. No necesitaba mi etiqueta como parte del botón en el que se puede hacer clic, por lo que la adición de mi etiqueta FAB está debajo de la que funciona en iOS. Bastante 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;
}

Answer 2

La solución de ross es excelente, pero para que funcione en Ionic v2 tuve que cambiar la clase .fab que viene con Ionic desde contain: strict contain: layout .

Así es como la clase es originalmente:

.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;
}

Entonces, agregue lo siguiente en su página .scss archivo:

.fab {
    contain: layout;
}

.fab clase .fab predeterminada para la página y funcionará.

Answer 3

Para lo que vale, pude lograr lo que pides con el siguiente SCSS.

Sería bueno que Ionic lo apoyara directamente, pero no puedo encontrar nada que indique que está incorporado.

    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;
    }