Floating action button — FlexCore Showcase

Overview

FabMenuControl renders a 56px round trigger fixed 2rem from the bottom-right of the viewport. Clicking it dims the page behind a backdrop and slides up one labelled round button per FabMenuItem, first item nearest the trigger. That open state is what other libraries call a speed dial. Picking an action closes the menu and runs the item's OnClick. No JavaScript.

On this page each example pins its instance inside a grey stage so two can be shown at once. In an app, leave the position alone.

Examples

#Trigger icon and extra content

IconCss replaces the plus. ChildContent renders in the fan after the items, for markup that is not an action.

Example

Razor

C#

Documentation

Parameters

Parameter	Type	Default	Description
`Items`	`IList<FabMenuItem>?`	`null`	Actions shown when open, first nearest the trigger.
`IconCss`	`string?`	`null`	Trigger icon. Default is a plus that rotates into a cross while open; a custom icon rotates too.
`ChildContent`	`RenderFragment?`	`null`	Extra markup rendered in the fan after the items. Clicks inside it do not close the menu.
`Disabled`	`bool`	`false`	Disables the trigger; the menu cannot open.
`Title (base)`	`string?`	`null`	Tooltip and accessible name of the trigger.
`CssClass / Style (base)`	`string?`	`null`	On the host element.
`(unmatched attributes)`	`Dictionary<string,object>`	—	Forwarded to the host `<div>`.

FabMenuItem

Property	Type	Default	Description
`Title`	`string`	`""`	Label chip beside the button and the button's tooltip.
`IconCss`	`string?`	`null`	Icon in the round button; a dot when empty.
`Color`	`BadgeVariant`	`Primary`	Fill: Primary, Secondary, Success, Danger, Warning, Info or Dark. `Light` has no rule in the stylesheet and renders with no fill.
`OnClick`	`EventCallback`	`none`	Runs after the menu closes.
`ctor`		—	`new(title, iconCss, color)`; set `OnClick` in an initializer.

Colours, sizes and the 2rem corner offset are fixed in the control's stylesheet; it reads no --fx-* variables. There are no public methods.

CSS classes

Class	Effect
`fx-fab-host · .fx-fab-open`	Fixed 2rem from the bottom-right, z-index 1050. `fx-fab-open` while the menu is showing.
`fx-fab-trigger`	56px blue circle with a shadow; grows 5% on hover.
`fx-fab-backdrop`	Full-screen 25% black layer; click closes the menu.
`fx-fab-actions`	Column of actions above the trigger; slides in over 0.2s.
`fx-fab-action-row · fx-fab-action-label · fx-fab-action-btn`	One action: white label chip plus a 42px circle that grows 10% on hover.
`fx-fab-color-primary … fx-fab-color-dark`	Seven fills, one per `BadgeVariant` except Light.

Keyboard and accessibility

The trigger is a native <button> with aria-expanded. Its default icon is an unlabelled SVG, so set Title to give it a name.
Each action is a native button named by its title attribute; the visible label chip is a separate span.
Enter or Space on the trigger opens and closes the menu. The action buttons come before the trigger in the DOM, so after opening use Shift+Tab to reach them. There is no arrow-key or Escape handling, and the backdrop is not focusable.
The fan slides in over 0.2s with no prefers-reduced-motion check.