web-dev-qa-db-ja.com

Ionic 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>
ionic-frameworkionic2ionic-view
24
muzi jack

価値のあることについては、次の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;
    }

enter image description here

49
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クラスを上書きし、機能します。

29
paulovitorjp

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>
2
Anjani Barnwal

選択した答えはほとんどの場合うまくいくように見えましたが、一部の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;
}
0
BRass