shadowFabは、1つ以上のfabボタンを含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上のfabリストを含むことができます。
fabリストコンポーネントのside
プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、side
の値が全て異なる限り、複数のfabリストを持つことができます。
fabを固定位置に配置するためには、外側の content コンポーネントの fixed
スロットに割り当てる必要があります。verticalとhorizontal
のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。
メインファブボタンの size
プロパティを "small"
に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
FABはアイコンのみを含むことができるため、開発者は各ion-fab-button
インスタンスに aria-label
を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
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 |
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 |
Description | ビューポートでファブを水平に揃える場所。 |
Attribute | horizontal |
Type | "center" | "end" | "start" | undefined |
Default | undefined |
Description | ビューポートでファブを縦に並べる場所。 |
Attribute | vertical |
Type | "bottom" | "center" | "top" | undefined |
Default | undefined |
No events available for this component.
Description | アクティブなFABリストコンテナを閉じる。 |
Signature | close() => Promise<void> |
No CSS shadow parts available for this component.
No CSS custom properties available for this component.
No slots available for this component.