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);
}