Shiny .NET v4 is here with BLE Windows Support, Improved GPS, & More! Check It Out

Fab & FabMenu | Blazor Usage

The Blazor <Fab> and <FabMenu> components mirror the MAUI controls with the same properties and behavior.

Setup

@using Shiny.Blazor.Controls

Fab

<div style="position: relative; height: 100vh;">
    <!-- Page content -->

    <!-- Icon-only Fab -->
    <Fab IconUrl="add.png"
         FabBackgroundColor="#E91E63"
         Command="OnAdd" />

    <!-- Extended Fab with text -->
    <Fab IconUrl="add.png"
         Text="Add Item"
         FabBackgroundColor="#4CAF50"
         TextColor="white"
         Command="OnAdd" />
</div>

@code {
    Task OnAdd()
    {
        // Handle tap
        return Task.CompletedTask;
    }
}

FabMenu

<div style="position: relative; height: 100vh;">
    <!-- Page content -->

    <FabMenu IsOpen="@isMenuOpen"
             IsOpenChanged="v => isMenuOpen = v"
             IconUrl="plus.png"
             FabBackgroundColor="#2196F3"
             HasBackdrop="true">
        <FabMenuItem IconUrl="share.png"
                     Text="Share"
                     FabBackgroundColor="#4CAF50"
                     Command="OnShare" />
        <FabMenuItem IconUrl="edit.png"
                     Text="Edit"
                     FabBackgroundColor="#FF9800"
                     Command="OnEdit" />
        <FabMenuItem IconUrl="delete.png"
                     Text="Delete"
                     FabBackgroundColor="#F44336"
                     Command="OnDelete" />
    </FabMenu>
</div>

@code {
    bool isMenuOpen;

    Task OnShare() => Task.CompletedTask;
    Task OnEdit() => Task.CompletedTask;
    Task OnDelete() => Task.CompletedTask;
}