jaki jest poprawny sposób wstawiania etykiety na liście Ionic FAB

Question

Chcę wstawić etykietę tak, aby pasowała do każdej ikony FAB na liście Fab, jaki jest właściwy sposób jej wykonania. sposób, w jaki zrobił to nie działa

<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

rozwiązanie Ross jest wielki, ale w celu użycia go do pracy na Ionic v2 musiałem zmienić klasę .fab że pochodzi z jońskich z contain: strict do contain: layout.

ten sposób klasa jest oryginalnie:

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

Tak, dodaj następujące na Twojej strony .scss pliku:

.fab { 
    contain: layout; 
} 

To będzie zastąpić domyślną klasę .fab do strony i jej będzie działać.

Answer 2

Na co warto, udało mi się osiągnąć to, co pytasz o następującej SCSS.

Byłoby miło, gdyby to było obsługiwane bezpośrednio przez Ionic, ale nie mogę znaleźć niczego, co wskazywałoby na to, że jest wbudowane.

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