Каков правильный способ вставки ярлыка в список ионных FAB

Я хочу вставить ярлык, чтобы он соответствовал каждому значку 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>

Ответ 1

Для чего это стоило, я смог выполнить то, что вы просите, с помощью следующего 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;
    }

Ответ 2

Решение ross велико, но для того, чтобы он работал на Ionic v2, мне пришлось изменить класс .fab, который поставляется с Ionic от 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 по умолчанию для страницы, и он будет работать.

Ответ 3

Если вы используете ионный 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>

Ответ 4

Выбранный ответ, казалось, работал большую часть времени, но на некоторых устройствах 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;
}