什么是在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>

推荐答案

ross解决方案很棒，但是为了让它在Ionic v2上工作，我不得不更改 .fab 类来自的I​​onic包含：严格到包含：layout 。

ross solution is great,but in order for it to work on Ionic v2 I had to change the .fab class that comes with Ionic from contain: strict to 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文件：

So, add the following on your page .scss file:

.fab {
    contain: layout;
}

它将覆盖默认的 .fab 类，它将起作用。

It will overwrite the default .fab class for the page and it will work.

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