Ionic 3 中带有标签的 Fab

Posted 2023-03-13

【中文标题】Ionic 3 中带有标签的 Fab

【英文标题】：Fabs With Labels In Ionic 3

【发布时间】：2018-04-06 13:26:13

【问题描述】：

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

特别菜单：

【问题讨论】：

您应该关注***.com/help/how-to-ask，了解如何发布您的问题，并展示您尝试过的内容、遇到问题的地方等，以避免投票失败和您的问题被关闭。

上下文不足。这些 Fab 图标是您已经拥有并能够包含的吗？

【参考方案1】：

在您的 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 上测试过了，它可以工作

【参考方案2】：

感谢@mark。对于从右到左的语言 (rtl)，您应该根据以下内容更改 scss 文件：（添加 left: 45px; 而不是 right: 40px;）

button[ion-fab] 
    overflow: visible;
    position: relative;

    ion-label 
        position: absolute;
        top: -8px;

        // this is the difference: 
        left: 45px;

        color: white;
        background-color: rgba(70, 70, 70, 0.7);
        line-height: 24px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px
    


.fab
    contain: layout;

我还更改了 ion-label 的背景颜色和字体大小，使其看起来更漂亮。

你的 html 文件应该像 @mark:

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