在 Ionic FAB 列表中插入标签的正确方法是什么答案

【问题标题】：whats the correct way of inserting label in an Ionic FAB list在 Ionic FAB 列表中插入标签的正确方法是什么
【发布时间】：2017-02-12 00:44:20
【问题描述】：

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

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

【问题讨论】：

标签： ionic-framework ionic2 ionic-view

【解决方案1】：

是的，你可以这样实现。

在component.html 文件中。

<ion-fab vertical="bottom" horizontal="end">
      <ion-fab-button color="success">
        <ion-icon name="alert-circle-outline"></ion-icon>
      </ion-fab-button>
      <ion-fab-list side="top">
        <ion-fab-button (click)="callFunction()" data-desc="Sales" color="success">
          <ion-icon name="cart-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button (click)="callFunction()" data-desc="Payment" color="success">
          <ion-icon name="cash-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button (click)="callFunction()" data-desc="Edit" color="danger">
          <ion-icon name="create-outline"></ion-icon>
        </ion-fab-button>
      </ion-fab-list>
    </ion-fab>

在component.css 文件中..

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

ion-fab-button[data-desc]::after {
    position: absolute;
    content: attr(data-desc);
    z-index: 1;
    right: 50px;
    bottom: 7px;
    color: var(--ion-color-contrast, #fff);
    background-color: var(--ion-color-base, #fff);
    padding: 5px 10px;
    border-radius: 10px;
    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】：

我将这种方式用于翻译和引导工作

    <ion-fab horizontal="start" vertical="bottom" slot="fixed">
    <ion-fab-button color="secondary" class="">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
        <ion-button color="success" (click)="callFunction()" style="text-transform:none">
            <ion-label class="fw-bold">{{'fab-nonstop' | translate }} </ion-label>
            <ion-icon name="airplane" class="ms-1"></ion-icon>
        </ion-button>
        <ion-button color="warning" (click)="callFunction()" style="text-transform:none">
            <ion-label class="fw-bold">{{'fab-stop' | translate }} </ion-label>
            <ion-icon name="car" class="ms-1"></ion-icon>
        </ion-button>
    </ion-fab-list>
</ion-fab>

这是结果：

【讨论】：

【解决方案3】：

I Ionic 4/5 已接受的答案（图标旁边的标签）不再起作用。您必须使用item 或data- 之类的全局属性来使用::after 伪css 样式。请看下面的例子：

HTML：

<ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button (click)="do1()" data-desc="Description 1">
        <ion-icon name="contact"></ion-icon>
      </ion-fab-button>
      <ion-fab-button (click)="do2()" data-desc="Description 2">
        <ion-icon name="person-add"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

SCSS：

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-primary);
  padding: 9px;
  border-radius: 15px;
  color: white;
  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);
}

来源：https://forum.ionicframework.com/t/fab-labels-in-ionic-4/139823/6

【讨论】：

Ionic 5 中的魅力。

【解决方案4】：

<ion-fab horizontal="end" vertical="bottom" size='small'>
  <ion-fab-button>
    <ion-icon name="md-arrow-dropup"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-item
      style="position: absolute; margin: auto; border: 1px solid; right: 20px; border-radius: 30px; he`ight: 38px;">
      <ion-icon style=" margin-top: 0px;" slot="end" src='assets/icon/lock.svg'></ion-icon>
      <ion-label style=" margin-top: 0px;">Log out</ion-label>
    </ion-item>
  </ion-fab-list>
</ion-fab>

带有标签和图标的ion-fab（预览版）：

【讨论】：

【解决方案5】：

如果您使用的是 ionic 4，这是给您的

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-dark);
  padding: 9px;
  border-radius: 15px;
  color: white;
  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);
}

<ion-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button color="primary" class="">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="primary" routerLink="/contacts/create" routerDirection="forward" data-desc="Create Contact">
        <ion-icon name="person-add"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="primary" >
        <ion-icon name="stats"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="primary" routerLink="/reminder/create" routerDirection="forward" data-desc="Create Reminder">
        <ion-icon name="alarm"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

【讨论】：

嗨，你有没有找到让它响应的方法？要拥有它，始终居中在 ion-fab-button 下方？这样，根据您传递给 dat-desc 的变量的大小，您必须从右侧或左侧更改边距...

【解决方案6】：

对于它的价值，我能够使用以下 SCSS 完成您所要求的。

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

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

【讨论】：

嗨..罗斯，我也想要这张图片 HTML 和 css。请给我同样的评论。提前谢谢你。
您需要添加它才能使其工作：contain: layout;
标签不可点击...：/
只需添加指针事件 css 并使标签可点击。按钮 [ion-fab] { 离子标签 { 指针事件：自动； } }

【解决方案7】：

选择的答案似乎在大多数情况下都有效，但在某些 iOS 设备中，它没有选择contain: layout; 设置，导致标签不对齐。我不需要我的标签作为可点击按钮的一部分，所以我的 FAB 标签添加在下面，它适用于 iOS。相当简单。

HTML

<ion-fab top right edge>
    <button ion-fab color="primary">
        <ion-icon name="add"></ion-icon>
    </button>
    <ion-label>Scan</ion-label>
</ion-fab>

CSS

ion-fab ion-label {
    font-weight: bold;
    color: color($colors, primary, base);
    text-align: center;
    margin: 0px !important;
}

【讨论】：

这样，标签不会在fab按钮下方的中心对齐。例如，如果按钮的宽度为 30px，并且标签上的“文本”大于该宽度，它将向左对齐。你知道一种让它居中的方法，独立于标签的大小吗？

【解决方案8】：

ross 解决方案很棒，但为了让它在 Ionic v2 上运行，我必须将 Ionic 附带的 .fab 类从 contain: strict 更改为 contain: layout。

这就是这个类最初的样子：

.fab {
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 0;
    display: block;
    overflow: hidden;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 56px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color, opacity 100ms linear;
    background-clip: padding-box;
    -webkit-font-kerning: none;
    font-kerning: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    contain: strict;
}

所以，在您的页面 .scss 文件中添加以下内容：

.fab {
    contain: layout;
}

它将覆盖页面的默认 .fab 类并且它会起作用。

【讨论】：