Skip to main content
Version: v5

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. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several fab-list elements with different side values.

Usage

<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<!-- fab placed to the top end -->
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button>
<ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button>
<ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the (vertical) center and start -->
<ion-fab vertical="center" horizontal="start" slot="fixed">
<ion-fab-button>
<ion-icon name="share"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the (vertical) center and end -->
<ion-fab vertical="center" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the top and end and on the top edge of the content overlapping header -->
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button>
<ion-icon name="person"></ion-icon>
</ion-fab-button>
</ion-fab>

<!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
<ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
<ion-fab-button>
<ion-icon name="settings"></ion-icon>
</ion-fab-button>
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>

<!-- fab placed in the center of the content with a list on each side -->
<ion-fab vertical="center" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="share"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
</ion-content>

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

Properties

activated

DescriptionIf 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.
Attributeactivated
Typeboolean
Defaultfalse

edge

DescriptionIf 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.
Attributeedge
Typeboolean
Defaultfalse

horizontal

DescriptionWhere to align the fab horizontally in the viewport.
Attributehorizontal
Type"center" | "end" | "start" | undefined
Defaultundefined

vertical

DescriptionWhere to align the fab vertically in the viewport.
Attributevertical
Type"bottom" | "center" | "top" | undefined
Defaultundefined

Events

No events available for this component.

Methods

close

DescriptionClose an active FAB list container.
Signatureclose() => 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.

View Source