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

SheetView | Blazor Usage

The Blazor <SheetView> component mirrors the MAUI control with the same properties and behavior.

Setup

Section titled “Setup”
@using Shiny.Blazor.Controls

Basic Usage

Section titled “Basic Usage”
<div style="position: relative; height: 100vh;">
    <!-- Page content -->
    <button @onclick="() => isOpen = true">Open Sheet</button>


    <!-- Sheet overlays on top -->
    <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

Section titled “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

Section titled “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;
}

Locked Sheet

Section titled “Locked Sheet”
<SheetView IsOpen="@isSignatureOpen"
           IsOpenChanged="v => isSignatureOpen = v"
           IsLocked="true"
           FitContent="true"
           HasBackdrop="true"
           SheetCornerRadius="20">
    <div style="padding: 20px;">
        <h3>Draw your signature</h3>
        <!-- signature content -->
        <button @onclick="() => isSignatureOpen = false">Done</button>
    </div>
</SheetView>


@code {
    bool isSignatureOpen;
}