Ionic 3 中带有标签的 Fab [英] Fabs With Labels In Ionic 3

问题描述

我正在使用 Ionic 3 框架并想在我的 Ionic 3 应用程序中插入以下类型的 fab 菜单.

I am using the Ionic 3 Framework and want to insert the following type of fab menu in my Ionic 3 App.

特别菜单:

推荐答案

在你的 SCSS 文件中:

In your SCSS file:

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 文件:

Your HTML file:

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

请参考此链接...

什么是正确的方法在 Ionic FAB 列表中插入标签

这是相当容易实施的.我已经在 Ionic 3 上测试过了，它可以工作

This one is fairly easy to impelement. I've tested this on Ionic 3 and it works

这篇关于Ionic 3 中带有标签的 Fab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！