在 Ionic FAB 列表中插入标签的正确方法是什么 [英] whats the correct way of inserting label in an Ionic FAB list

问题描述

我想插入一个标签，以便匹配 Fab 列表中的每个 FAB 图标，正确的做法是什么.我这样做的方式不起作用

i want to insert a label so that matches every FAB icon on the Fab list whats the correct way of doing it. the way i did it it doesn't work

<ion-fab left middle>
  <button ion-fab color="dark">
    <ion-icon name="arrow-dropup"></ion-icon>
    <ion-label>here</ion-label>
  </button>
  <ion-fab-list side="top">
    <button ion-fab>
      <ion-icon name="logo-facebook"></ion-icon>
      <ion-label>here</ion-label>
    </button>
    <button ion-fab>
      <ion-icon name="logo-twitter"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-vimeo"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-googleplus"></ion-icon>
    </button>
  </ion-fab-list>
</ion-fab>

推荐答案

就其价值而言，我能够使用以下 SCSS 完成您的要求.

For what it's worth, I was able to accomplish what you ask with the following SCSS.

如果 Ionic 直接支持它会很好，但我找不到任何表明这是内置的.

It'd be nice if this was supported directly by Ionic, but I can't find anything indicating this is built-in.

    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;
        }
        contain: layout;
    }

这篇关于在 Ionic FAB 列表中插入标签的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！