ion-fab
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内のすべてのアイテムの下に配置されていると、ユーザーがフローティングアクションボタンに移動するのが難しい場合があります。
Contentの fixedSlotPlacement プロパティを before に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。
ボタンサイズ
メインファブボタンの size プロパティを "small" に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
テーマ
Colors
CSSカスタムプロパティ
CSS Shadow Parts
アクセシビリティ
ラベル
FABはアイコンのみを含むことができるため、開発者は各ion-fab-buttonインスタンスに aria-label を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
プロパティ
activated
| Description | If 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. |
| Attribute | activated |
| Type | boolean |
| Default | false |
edge
| Description | If 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. |
| Attribute | edge |
| Type | boolean |
| Default | false |
horizontal
| Description | Where to align the fab horizontally in the viewport. |
| Attribute | horizontal |
| Type | "center" ｜ "end" ｜ "start" ｜ undefined |
| Default | undefined |
vertical
| Description | Where to align the fab vertically in the viewport. |
| Attribute | vertical |
| Type | "bottom" ｜ "center" ｜ "top" ｜ undefined |
| Default | undefined |
イベント
No events available for this component.
メソッド
close
| Description | Close an active FAB list container. |
| 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.