Label 离子2：带标签的晶圆厂按钮

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

奇怪的是，这样一个基本功能还没有在离子2实现

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

---

谢谢

这对我非常有效

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

---

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

这是一个离子反应示例：

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。您需要使用IonFab按钮的数据描述属性来设置标签

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

你可能会觉得这值得一试，不管怎样，你完成了吗？

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