Version: v7

ion-fab

Fabは、1つ以上のfabボタンを含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上のfabリストを含むことができます。

基本的な使い方

<ion-fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

List Side

fabリストコンポーネントのsideプロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、sideの値が全て異なる限り、複数のfabリストを持つことができます。

<ion-fab slot="fixed" horizontal="center" vertical="center">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button>
      <ion-icon name="chevron-up"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="end">
    <ion-fab-button>
      <ion-icon name="chevron-forward"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="chevron-forward"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="bottom">
    <ion-fab-button>
      <ion-icon name="chevron-down"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="start">
    <ion-fab-button>
      <ion-icon name="chevron-back"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="chevron-back"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

ポジション

fabを固定位置に配置するためには、外側の content コンポーネントの fixed スロットに割り当てる必要があります。verticalとhorizontalのプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。

<ion-header>
  <ion-toolbar>
    <ion-title>Fab Buttons</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-fab slot="fixed" vertical="top" horizontal="start">
    <ion-fab-button>
      <ion-icon name="chevron-forward-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="end">
      <ion-fab-button>
        <ion-icon name="document"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="color-palette"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="globe"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

  <ion-fab slot="fixed" vertical="top" horizontal="end" [edge]="true">
    <ion-fab-button>
      <ion-icon name="chevron-down-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="bottom">
      <ion-fab-button>
        <ion-icon name="document"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="color-palette"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="globe"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

  <ion-fab slot="fixed" vertical="bottom" horizontal="end">
    <ion-fab-button>
      <ion-icon name="chevron-up-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button>
        <ion-icon name="document"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="color-palette"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="globe"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

セーフエリア

ion-headerコンポーネントやion-footerコンポーネントがない場合、fabはデバイスのノッチやステータスバー、その他のデバイスUIで覆われている可能性があります。このような場合、上下の safe area は考慮されません。これは --ion-safe-area-(dir)変数を使って調整することができます。

verticalを"top"に設定したfabを ion-header なしで使用する場合は、上マージンを設定する必要があります：

ion-fab {
  margin-top: var(--ion-safe-area-top, 0)；
}

また、ion-footerなしでverticalを"bottom"に設定したfabを使用する場合は、下マージンを設定する必要があります：

ion-fab {
  margin-bottom: var(--ion-safe-area-bottom, 0)；
}

ion-header (vertical が "top" に設定されたファブの場合) または ion-footer (vertical が "bottom" に設定されたファブの場合) がある場合、ファブはヘッダまたはフッタからの相対位置に配置されるため、CSS の調整は必要ありません。

src/app/example.component.html
src/app/example.component.css
src/global.css

<ion-fab slot="fixed" vertical="top" horizontal="center">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

ion-fab {
  margin-top: var(--ion-safe-area-top, 0);
  margin-bottom: var(--ion-safe-area-bottom, 0);
}

:root {
  /**
   * Setting the variables for DEMO purposes only.
   * Values will be set automatically when building an iOS or Android app.
   */
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 20px;
}

ボタンサイズ

メインファブボタンの size プロパティを "small" に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。

<ion-fab>
  <ion-fab-button size="small">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="end">
    <ion-fab-button>
      <ion-icon name="document"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="color-palette"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="globe"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

テーマ

Colors

<ion-fab slot="fixed" horizontal="center" vertical="center">
  <ion-fab-button color="secondary">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button color="primary">
      <ion-icon name="chevron-up"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="end">
    <ion-fab-button color="tertiary">
      <ion-icon name="chevron-forward"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="success">
      <ion-icon name="chevron-forward"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="bottom">
    <ion-fab-button color="warning">
      <ion-icon name="chevron-down"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="start">
    <ion-fab-button color="danger">
      <ion-icon name="chevron-back"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="dark">
      <ion-icon name="chevron-back"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

CSSカスタムプロパティ

src/app/example.component.html
src/app/example.component.css

<ion-fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="end">
    <ion-fab-button>
      <ion-icon name="document"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="color-palette"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="globe"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

ion-fab-button {
  --background: #b7f399;
  --background-activated: #87d361;
  --background-hover: #a3e681;
  --border-radius: 15px;
  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --color: black;
}

CSS Shadow Parts

src/app/example.component.html
src/app/example.component.css

<ion-fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="end">
    <ion-fab-button>
      <ion-icon name="document"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="color-palette"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="globe"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

ion-fab-button::part(native) {
  background-color: #b7f399;
  border-radius: 15px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  color: black;
}

ion-fab-button::part(native):hover::after {
  background-color: #a3e681;
}

ion-fab-button::part(native):active::after {
  background-color: #87d361;
}

アクセシビリティ

ラベル

FABはアイコンのみを含むことができるため、開発者は各ion-fab-buttonインスタンスに aria-label を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。

プロパティ

activated

Description	もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。
Attribute	`activated`
Type	`boolean`
Default	`false`

edge

Description	`true`の場合、`vertical`が`"top"`の場合はヘッダーの端に、`"bottom"`の場合はフッターの端にファブを表示します。 `fixed` slotと一緒に使用する必要があります。
Attribute	`edge`
Type	`boolean`
Default	`false`

horizontal

Description	ビューポートでファブを水平に揃える場所。
Attribute	`horizontal`
Type	`"center" ｜ "end" ｜ "start" ｜ undefined`
Default	`undefined`

vertical

Description	ビューポートでファブを縦に並べる場所。
Attribute	`vertical`
Type	`"bottom" ｜ "center" ｜ "top" ｜ undefined`
Default	`undefined`

イベント

No events available for this component.

メソッド

close

Description	アクティブなFABリストコンテナを閉じる。
Signature	`close() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.

基本的な使い方​

List Side​

ポジション​

セーフエリア​

ボタンサイズ​

テーマ​

Colors​

CSSカスタムプロパティ​

CSS Shadow Parts​

アクセシビリティ​

ラベル​

プロパティ​

activated​

edge​

horizontal​

vertical​

イベント​

メソッド​

close​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

List Side

ポジション

セーフエリア

ボタンサイズ

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

アクセシビリティ

ラベル

プロパティ

activated

edge

horizontal

vertical

イベント

メソッド

close

CSS Shadow Parts

CSSカスタムプロパティ

Slots