Fab & FabMenu | FabMenu

FabMenu

A main Fab plus one or more FabMenuItem children that animate up (staggered) when the menu opens. IsOpen is two-way bindable.

<shiny:FabMenu IsOpen="{Binding IsMenuOpen}"
               Icon="plus.png"
               FabBackgroundColor="#2196F3"
               HorizontalOptions="End"
               VerticalOptions="End"
               Margin="24">
    <shiny:FabMenuItem Icon="share.png"
                       Text="Share"
                       FabBackgroundColor="#4CAF50"
                       Command="{Binding ShareCommand}" />
    <shiny:FabMenuItem Icon="edit.png"
                       Text="Edit"
                       FabBackgroundColor="#FF9800"
                       Command="{Binding EditCommand}" />
    <shiny:FabMenuItem Icon="delete.png"
                       Text="Delete"
                       FabBackgroundColor="#F44336"
                       Command="{Binding DeleteCommand}" />
</shiny:FabMenu>

Tapping the main Fab toggles IsOpen. Tapping a FabMenuItem executes its Command, raises ItemTapped, and (by default) closes the menu.

FabMenu Properties

In addition to all main-Fab pass-throughs (Icon, Text, FabBackgroundColor, BorderColor, BorderThickness, TextColor):

Property	Type	Default	Description
IsOpen	bool	false	Two-way bindable; opens/closes with animation
Items	IList<FabMenuItem>	empty	Content property — place items directly inside <shiny:FabMenu>
HasBackdrop	bool	true	Show dim backdrop behind the menu
BackdropColor	Color	Black	Backdrop color
BackdropOpacity	double	0.4	Backdrop peak opacity
CloseOnBackdropTap	bool	true	Close when backdrop tapped
CloseOnItemTap	bool	true	Close after item tap
AnimationDuration	uint	200	Duration (ms) of open/close animation
UseHapticFeedback	bool	true	Haptic click when menu is toggled

Events: ItemTapped(FabMenuItem). Methods: Open(), Close(), Toggle().

FabMenuItem

An action inside the menu — icon button plus side label.

FabMenuItem Properties

Property	Type	Default	Description
Icon	ImageSource?	null	Icon rendered inside the circular button
Text	string?	null	Side label
Command	ICommand?	null	Invoked on tap
CommandParameter	object?	null	Parameter forwarded to the Command
FabBackgroundColor	Color	#2196F3	Icon button fill
BorderColor	Color?	null	Icon button outline
BorderThickness	double	0	Icon button outline thickness
TextColor	Color	Black	Side-label text color
LabelBackgroundColor	Color	White	Side-label fill color
FontSize	double	13	Side-label font size
Size	double	44	Icon button diameter
IconSize	double	20	Icon image size
UseHapticFeedback	bool	true	Haptic click on tap

Events: Clicked.