ion-fab
Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fabs should have one main fab button. Fabs can also contain one or more fab lists which contain related buttons that show when the main fab button is clicked.
Basic Usageâ
List Sideâ
The side property of the fab list component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for side.
Positioningâ
In order to place the fab in a fixed position, it should be assigned to the fixed slot of the outer content component. Use the vertical and horizontal props to control the alignment of the fab in the viewport. The edge prop will cause the fab button to overlap with the app's header or footer.
Button Sizingâ
Setting the size property of the main fab button to "small" will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
Themingâ
Colorsâ
CSS Custom Propertiesâ
CSS Shadow Partsâ
Propertiesâ
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 |
Eventsâ
No events available for this component.
Methodsâ
closeâ
| Description | Close an active FAB list container. |
| Signature | close() => Promise<void> |
CSS Shadow Partsâ
No CSS shadow parts available for this component.
CSS Custom Propertiesâ
No CSS custom properties available for this component.
Slotsâ
No slots available for this component.