label - ionic 2 : Fab button with label

Question

我正在按照文档使用 ionic 2 构建应用程序。我已经实现了一个带有 fab-list 的 fab 按钮。我试图在包含按钮旁边放置一个描述性标签。开箱即用的 ionic 2 似乎无法在 float 按钮旁边放置标签。我在 stackoverflow 和 github 上查看了几个关于它的问题。

奇怪的是，ionic 2竟然没有实现这么基本的功能……

有没有一种简单的方法可以在 ionic 2 中的 float 按钮旁边放置一个描述标签？

谢谢

Answer 1

这对我来说非常有效

    <ion-fab bottom right>
            <button ion-fab ><ion-icon name="add"></ion-icon></button>
          <ion-fab-list side="top">

            <button ion-fab >
              <ion-icon name="logo-facebook"></ion-icon>
              <div class="label">Facebook</div>
            </button>

            <button ion-fab >
              <ion-icon name="logo-instagram"></ion-icon>
              <div  class="label" dir="rtl">Instagram </div>
            </button>

            <button ion-fab >
              <ion-icon name="logo-twitter"></ion-icon>
              <div  class="label" dir="rtl">Twitter</div>
            </button>

            <button ion-fab >
              <ion-icon name="logo-whatsapp"></ion-icon>
              <div  class="label" dir="rtl">Whatsapp</div>
            </button>

          </ion-fab-list>
        </ion-fab>

CSS:

.fab {
    contain: initial;
}

ion-fab {
    ion-fab-list button[ion-fab] {
      overflow: visible;

      div.label {
        position: absolute;
        right: 48px;
        background: rgba(0,0,0,0.7);
        height: 24px;
        line-height: 16px;
        padding: 5px 8px;
        border-radius: 3px;
        color: #fff;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
    }
  }