ionic2 - 带有Ionic 3标签的Fab

我正在使用Ionic 3 Framework，并想在Ionic 3 App中插入以下类型的fab菜单。

特殊工厂菜单:

最佳答案

在您的SCSS文件中:

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

.fab{
    contain: layout;
}

您的HTML文件:

<ion-fab bottom right >
  <button ion-fab>Share</button>
  <ion-fab-list side="top">
     <button ion-fab>
        <ion-icon name="logo-facebook"></ion-icon>
        <ion-label>Facebook</ion-label>
     </button>
  </ion-fab-list>
</ion-fab>

请引用此链接...

whats the correct way of inserting label in an Ionic FAB list

这是相当容易实现的。我已经在Ionic 3上进行了测试，并且可以正常工作

关于ionic2 - 带有Ionic 3标签的Fab，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46932699/