ion-fab

影

FABは、1つ以上のFABボタンを含むコンテナ要素です。コンテンツと共にスクロールしない固定位置に配置する必要があります。FABには、メインのFABボタンが1つ必要です。FABには、メインのFABボタンをクリックしたときに表示される関連ボタンを含む1つ以上のFABリストを含めることもできます。

基本的な使用方法

リストの配置

FABリストコンポーネントのsideプロパティは、メインのFABボタンに対する表示位置を制御します。すべてのsideに異なる値が設定されている限り、単一のFABには複数のFABリストを含めることができます。

配置

FABを固定位置に配置するには、外部のコンテンツコンポーネントのfixedスロットに割り当てる必要があります。verticalおよびhorizontalプロパティを使用して、ビューポート内でのFABの位置合わせを制御します。edgeプロパティを使用すると、FABボタンがアプリのヘッダーまたはフッターと重なります。

セーフエリア

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

verticalを"top"に設定し、ion-headerがないFABを使用する場合、トップマージンを設定する必要があります。

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

また、verticalを"bottom"に設定し、ion-footerがないFABを使用する場合、ボトムマージンを設定する必要があります。

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

ion-header（verticalが"top"に設定されたFABの場合）またはion-footer（verticalが"bottom"に設定されたFABの場合）がある場合、FABはヘッダーまたはフッターを基準に配置されるため、CSS調整は必要ありません。

無限リストに対する相対位置

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

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

ボタンのサイズ

メインのFABボタンのsizeプロパティを"small"に設定すると、ミニサイズでレンダリングされます。このプロパティは、内部のFABボタンで使用しても効果はありません。

テーマ

色

CSSカスタムプロパティ

CSSシャドウパーツ

アクセシビリティ

ラベル

FABにはアイコンのみを含めることができるため、開発者は各ion-fab-buttonインスタンスにaria-labelを提供する必要があります。このラベルがない場合、支援技術は各ボタンの目的をアナウンスできません。

プロパティ

activated

説明	trueの場合、ion-fab-buttonとion-fab内のすべてのion-fab-listがアクティブになります。つまり、ion-fab-buttonはcloseアイコンになり、ion-fab-listが表示されます。
属性	activated
タイプ	boolean
デフォルト	false

edge

説明	trueの場合、verticalが"top"の場合はヘッダーの端、"bottom"の場合はフッターの端にFABが表示されます。fixedスロットと共に使用する必要があります。
属性	edge
タイプ	boolean
デフォルト	false

horizontal

説明	ビューポート内でFABを水平方向に配置する場所。
属性	horizontal
タイプ	"center" ｜ "end" ｜ "start" ｜ undefined
デフォルト	undefined

vertical

説明	ビューポート内でFABを垂直方向に配置する場所。
属性	vertical
タイプ	"bottom" ｜ "center" ｜ "top" ｜ undefined
デフォルト	undefined

イベント

このコンポーネントで使用できるイベントはありません。

メソッド

close

説明	アクティブなFABリストコンテナを閉じます。
シグネチャ	close() => Promise<void>

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用できるCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。