Class SfFab

The Blazor FAB Component (Floating Action Button) is an extension of SfButton that appears in front of all the contents of the page and performs the primary action.

Inheritance
System.Object
SfBaseComponent
SfButton
SfFab
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfFab : SfButton
Examples

A simple FAB with text content.

 
<SfFab Content="Click"/>

FAB with icon.

 
<SfFab IconCss="e-icons e-search"/>

FAB with icon and text.

 
<SfFab IconCss="e-icons e-search" Content="Search"/>

FAB with info button style.

 
<SfFab CssClass="e-info" IconCss="e-icons e-search"/>

Constructors

SfFab()

Declaration
public SfFab()

Properties

IsPrimary

Gets or sets a value that indicates whether to apply primary style for FAB.

Declaration
public override bool IsPrimary { get; set; }
Property Value
Type Description
System.Boolean

true, if the primary style is applied for FAB component. The default value is true.
Overrides

Position

Gets or sets the value that indicates the position of the FAB relative to Target.

Declaration
public FabPosition Position { get; set; }
Property Value
Type Description
FabPosition

One of the FabPosition enumeration that specifies the position of FAB. The default value is BottomRight.
Remarks

To refresh the position of FAB on Target resized, use RefreshPositionAsync() method. The position will be refreshed automatically when browser resized.

Target

Gets or sets the selector that points to an element in which the FAB will be positioned.

Declaration
public string Target { get; set; }
Property Value
Type Description
System.String

The default value is null where FAB is positioned based on viewport of browser.
Remarks

The target element must have relative position, else FAB will get positioned based on the closest element which has relative position.

Examples

Simple FAB with target.

 
<div id="target_element" style="position:relative;"></div>
<SfFab Content="Click" Target="#target_element"/>

Visible

Gets or sets a value that indicates whether the FAB is visible or hidden.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean

true, if the FAB is visible. The default value is true.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

RefreshPositionAsync()

Refreshes the FAB position. You can call this method to re-position FAB when Target is resized.

Declaration
public Task RefreshPositionAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task representing the asynchronous operation.