cách chèn nhãn chính xác vào danh sách ION FAB

Question

tôi muốn chèn nhãn sao cho phù hợp với mọi biểu tượng FAB trong danh sách Fab là cách thực hiện đúng. cách tôi đã làm nó nó không hoạt động

<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

giải pháp ross là rất tốt, nhưng để cho nó hoạt động trên Ionic v2 tôi đã phải thay đổi lớp .fab mà đi kèm với Ionic contain: strict-contain: layout.

Đây là cách lớp là ban đầu:

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

Vì vậy, thêm dòng sau trên trang của bạn .scss file:

.fab { 
    contain: layout; 
} 

Nó sẽ ghi đè lên lớp mặc định .fab cho trang đó và nó sẽ làm việc.

Answer 2

Đối với những gì nó có giá trị, tôi đã có thể thực hiện những gì bạn hỏi với SCSS sau.

Nó sẽ được tốt đẹp nếu điều này đã được hỗ trợ trực tiếp bởi Ionic, nhưng tôi không thể tìm thấy bất cứ điều gì chỉ ra điều này được xây dựng trong.

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