Fab & FabMenu | Fab

Fab

A single floating action button. Tap triggers Command (and fires the Clicked event).

<!-- Icon-only circular Fab -->
<shiny:Fab Icon="add.png"
           FabBackgroundColor="#E91E63"
           Command="{Binding AddCommand}"
           HorizontalOptions="End"
           VerticalOptions="End"
           Margin="24" />

<!-- Extended Fab with text -->
<shiny:Fab Icon="add.png"
           Text="Add Item"
           FabBackgroundColor="#4CAF50"
           TextColor="White"
           Command="{Binding AddCommand}"
           HorizontalOptions="End"
           VerticalOptions="End"
           Margin="24" />

<!-- Outlined Fab -->
<shiny:Fab Text="Save"
           FabBackgroundColor="Transparent"
           BorderColor="#9C27B0"
           BorderThickness="2"
           TextColor="#9C27B0"
           Command="{Binding SaveCommand}" />

Properties

Property	Type	Default	Description
Icon	ImageSource?	null	Icon displayed inside the button
Text	string?	null	Optional label; when null the Fab is a perfect circle
Command	ICommand?	null	Executed on tap
CommandParameter	object?	null	Parameter forwarded to the Command
FabBackgroundColor	Color	#2196F3	Fill color
BorderColor	Color?	null	Outline stroke color
BorderThickness	double	0	Outline stroke thickness
TextColor	Color	White	Label text color
FontSize	double	14	Label font size
FontAttributes	FontAttributes	None	Label font attributes
Size	double	56	Height of the Fab (diameter when circular)
IconSize	double	24	Icon image size
HasShadow	bool	true	Drop shadow on/off
UseFeedback	bool	true	Haptic click on tap

Events: Clicked.