Sheet

A sheet is a panel that slides in from the edge of the screen. It's a versatile component for displaying supplementary content, forms, or navigation menus without leaving the current context.

Under the Hood

The RzSheet component family uses an Alpine.js component (`x-data="rzSheet"`) to manage its open/close state and user interactions. It leverages data attributes to control its appearance and animations, ensuring a clean separation of concerns and CSP compliance.

Basic Sheet

This example shows a basic sheet that slides in from the right, which is the default behavior. Click the trigger button to open it.

Source

<RzSheet>
    <SheetTrigger AsChild>
        <RzButton Variant="ThemeVariant.Primary">Open Sheet</RzButton>
    </SheetTrigger>
    <SheetContent>
        <SheetHeader>
            <SheetTitle>Edit Profile</SheetTitle>
            <SheetDescription>
                Make changes to your profile here. Click save when you're done.
            </SheetDescription>
        </SheetHeader>
        <div class="grid gap-4 py-4 px-6">
            <div class="grid grid-cols-4 items-center gap-4">
                <label for="name" class="text-right">Name</label>
                <input id="name" value="Michael Tanczos" class="input col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <label for="username" class="text-right">Username</label>
                <input id="username" value="@jalexsocial" class="input col-span-3" />
            </div>
        </div>
        <SheetFooter>
            <SheetClose AsChild>
                <RzButton Variant="ThemeVariant.Primary">Save changes</RzButton>
            </SheetClose>
        </SheetFooter>
    </SheetContent>
</RzSheet>

Side Variations

Use the `Side` parameter on the `SheetContent` component to control which edge of the screen the sheet appears from.

Source

@foreach (var side in Enum.GetValues<SheetSide>())
{
    <RzSheet>
        <SheetTrigger AsChild>
            <RzButton Variant="ThemeVariant.Secondary">@side</RzButton>
        </SheetTrigger>
        <SheetContent Side="side">
            <SheetHeader>
                <SheetTitle>Sheet from the @side.ToString().ToLower()</SheetTitle>
                <SheetDescription>
                    This is a demonstration of a sheet sliding in from the @side.ToString().ToLower().
                </SheetDescription>
            </SheetHeader>
        </SheetContent>
    </RzSheet>
}

Component Parameters

The following tables summarize the parameters for each component in the Sheet family.

RzSheet

Property	Description	Type	Default
`ChildContent`	The content of the sheet, which should include a `SheetTrigger` and a `SheetContent`.	`RenderFragment`	Required
`DefaultOpen`	If set to `true`, the sheet will be open by default.	`bool`	`false`

SheetTrigger & SheetClose

Property	Description	Type	Default
`ChildContent`	The content to be rendered as the trigger or close element.	`RenderFragment`	Required
`AsChild`	If set to `true`, the component will merge its properties and behavior into its first child element instead of rendering its own wrapper.	`bool`	`false`

SheetContent

Property	Description	Type	Default
`ChildContent`	The content to be displayed inside the sheet panel.	`RenderFragment`	Required
`Side`	The side from which the sheet will appear. Options are `Top`, `Right`, `Bottom`, `Left`.	`SheetSide`	`SheetSide.Right`

SheetHeader, SheetFooter, SheetTitle, SheetDescription

These components primarily accept ChildContent and pass through any additional attributes. They have no unique parameters beyond standard HTML attributes.