メインコンテンツまでスキップ
バージョン: 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

DescriptionIf true, both the ion-fab-button and all ion-fab-list inside ion-fab will become active. That means ion-fab-button will become a close icon and ion-fab-list will become visible.
Attributeactivated
Typeboolean
Defaultfalse

edge

DescriptionIf true, the fab will display on the edge of the header if vertical is "top", and on the edge of the footer if it is "bottom". Should be used with a fixed slot.
Attributeedge
Typeboolean
Defaultfalse

horizontal

DescriptionWhere to align the fab horizontally in the viewport.
Attributehorizontal
Type"center" | "end" | "start" | undefined
Defaultundefined

vertical

DescriptionWhere to align the fab vertically in the viewport.
Attributevertical
Type"bottom" | "center" | "top" | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

close

DescriptionClose an active FAB list container.
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.