ionic 2：带有标签的 Fab 按钮

Question

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

奇怪的是，在ionic 2中没有实现这样的基本功能......

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

谢谢

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

Answer 2

在最新的 Ionic 框架中，您可以显示 IonFabButton 的标签，如下所示：

这是一个 Ionic-React 示例：

1.将以下内容粘贴到相应的 .css 文件中

ion-fab-button[data-desc] {
    position: relative;
}

ion-fab-button[data-desc]::after {
    position: absolute;
    content: attr(data-desc);
    z-index: 1;
    right: 55px;
    bottom: 4px;
    background-color: var(--ion-color-light);
    padding: 5px;
    border-radius: 5px;
    color: black;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

2。您需要使用 IonFabButton 的 data-desc 属性来设置标签

<IonFab vertical="bottom" horizontal="end" slot="fixed">
    <IonFabButton>
        <IonIcon icon={add} />
    </IonFabButton>
    <IonFabList side="top">
        <IonFabButton routerLink="/documents" data-desc="Upload Document">
            <IonIcon icon={folderOpen} color="warning" />
        </IonFabButton>
        <IonFabButton routerLink="/leave" data-desc="Apply for Leave">
          <IonIcon icon={calendarOutline} color="secondary" />
        </IonFabButton>
        <IonFabButton routerLink="/expenses"  data-desc="New Expense">
          <IonIcon icon={cardOutline} color="success" />
        </IonFabButton>
        <IonFabButton routerLink="/timesheet"  data-desc="New Timesheet">
          <IonIcon icon={timeOutline} color="primary" />
        </IonFabButton>
    </IonFabList>
</IonFab>