Ionic FABリストにラベルを挿入する正しい方法

Question

FabラベルのすべてのFABアイコンと一致するようにラベルを挿入したいのですが正しい方法です。私はそれをやった方法は、それはそれは価値があるものを、私はあなたが以下のSCSSで尋ねるものを達成することができたため

<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

ロス・ソリューションは素晴らしいですが、それはイオンv2で動作するためには、私はcontain: layoutにcontain: strictからイオンが付属しています.fabクラスを変更する必要がありました。

これは、クラスが最初にある方法です：

ので

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

、あなたのページ.scssファイルに次の行を追加します。

.fab { 
    contain: layout; 
} 

それはページのデフォルト.fabクラスを上書きしてます働くでしょう。

Answer 2

を動作しません。

これはIonicによって直接サポートされていればうれしいですが、これが内蔵されていることを示すものは見つかりません。

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