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 | もし true ならば、ion-fab 内の ion-fab-button とすべての ion-fab-list の両方がアクティブになる。つまり、ion-fab-buttonはcloseアイコンになり、ion-fab-listは可視化される。 |
| Attribute | activated |
| Type | boolean |
| Default | false |
| Description | trueの場合、verticalが"top"の場合はヘッダーの端に、"bottom"の場合はフッターの端にファブを表示します。 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.