Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfFab

    Show / Hide Table of Contents

    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
    SfButton.OnAfterRenderAsync(Boolean)
    SfButton.FocusAsync()
    SfButton.ChildContent
    SfButton.Content
    SfButton.CssClass
    SfButton.Disabled
    SfButton.EnableRtl
    SfButton.IconCss
    SfButton.IconPosition
    SfButton.IsToggle
    SfButton.OnClick
    SfButton.Created
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    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
    SfButton.IsPrimary

    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
    SfButton.BuildRenderTree(RenderTreeBuilder)

    OnInitializedAsync()

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

    OnParametersSetAsync()

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

    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.

    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved