Skip to main content
Version: v8

ion-fab

shadow

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

基本的な使い方

List Side

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

ポジション

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

セーフエリア

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 の調整は必要ありません。

無限リストとの相対関係

無限にスクロールするリストなど、ビューに多くのインタラクティブ要素が含まれるシナリオでは、フローティングアクションボタン(FAB)がDOM内のすべてのアイテムの下に配置されていると、ユーザーがフローティングアクションボタンに移動するのが難しい場合があります。

ContentfixedSlotPlacement プロパティを before に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。

ボタンサイズ

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

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

アクセシビリティ

ラベル

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

プロパティ

activated

Descriptionもし true ならば、ion-fab 内の ion-fab-button とすべての ion-fab-list の両方がアクティブになる。つまり、ion-fab-buttoncloseアイコンになり、ion-fab-listは可視化される。
Attributeactivated
Typeboolean
Defaultfalse

edge

Descriptiontrueの場合、vertical"top"の場合はヘッダーの端に、"bottom"の場合はフッターの端にファブを表示します。 fixed slotと一緒に使用する必要があります。
Attributeedge
Typeboolean
Defaultfalse

horizontal

Descriptionビューポートでファブを水平に揃える場所。
Attributehorizontal
Type"center" | "end" | "start" | undefined
Defaultundefined

vertical

Descriptionビューポートでファブを縦に並べる場所。
Attributevertical
Type"bottom" | "center" | "top" | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

close

DescriptionアクティブなFABリストコンテナを閉じる。
Signatureclose() => 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.