Shiny .NET v4.1 BETA - Linux, MacOS, & Blazor Support! TONS of new features and improvements across the board. Check It Out

FloatingPanel | Blazor Usage

Setup

@using Shiny.Blazor.Controls

Basic Usage

<div style="position: relative; height: 100vh;">
    <button @onclick="() => isOpen = true">Open Sheet</button>

    <SheetView IsOpen="@isOpen"
               IsOpenChanged="v => isOpen = v"
               SheetBackgroundColor="#FFFFFF"
               HandleColor="#CCCCCC"
               SheetCornerRadius="16">
        <div style="padding: 20px;">
            <h3>Sheet Content</h3>
            <p>Drag the handle or tap the backdrop to close.</p>
            <button @onclick="() => isOpen = false">Close</button>
        </div>
    </SheetView>
</div>

@code {
    bool isOpen;
}

Custom Detents

<SheetView IsOpen="@isOpen"
           IsOpenChanged="v => isOpen = v"
           Detents="@detents"
           SheetBackgroundColor="#1E1E1E"
           HandleColor="#888888"
           SheetCornerRadius="24">
    <div style="padding: 20px; color: white;">
        <h3>Custom Sheet</h3>
    </div>
</SheetView>

@code {
    bool isOpen;
    List<DetentValue> detents = [new(0.33), new(0.66), new(1.0)];
}

Header Peek

<SheetView IsOpen="@isOpen"
           IsOpenChanged="v => isOpen = v"
           ShowHeaderWhenMinimized="true">
    <HeaderTemplate>
        <div style="padding: 16px 16px 8px;">
            Now Playing — Click to expand
        </div>
    </HeaderTemplate>
    <ChildContent>
        <div style="padding: 20px;">
            <p>Full player controls here</p>
        </div>
    </ChildContent>
</SheetView>

@code {
    bool isOpen;
}