sufi-blazor/docs/components/overlays/SbDrawer.md

SbDrawer

A slide-out panel component for displaying content from the edge of the screen.

Parameters

Parameter	Type	Default	Description
Open	bool	false	Whether the drawer is open
Placement	SbDrawerPlacement	Start	Drawer position (Start, End, Top, Bottom)
Modal	bool	true	Whether drawer has a backdrop
Title	string?	null	Drawer title
Width	string	"320px"	Width for Start/End placement
Height	string	"320px"	Height for Top/Bottom placement
CloseOnEscape	bool	true	Whether to close on Escape key
CloseOnBackdropClick	bool	true	Whether to close on backdrop click
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Events

Event	Type	Description
OpenChanged	EventCallback<bool>	Fired when open state changes

Templates / Slots

Slot	Type	Description
Header	RenderFragment	Custom header content
ChildContent	RenderFragment	Drawer body content
Footer	RenderFragment	Footer content

SbDrawerPlacement Enum

public enum SbDrawerPlacement
{
    Start,   // Left in LTR, Right in RTL
    End,     // Right in LTR, Left in RTL
    Top,     // Top of screen
    Bottom   // Bottom of screen
}

CSS Classes

• sb-drawer - Base class
• sb-drawer--start|end|top|bottom - Placement variants
• sb-drawer--modal - When modal is true
• sb-drawer__container - Inner container
• sb-drawer__header - Header section
• sb-drawer__title - Title text
• sb-drawer__close-btn - Close button
• sb-drawer__body - Body content
• sb-drawer__footer - Footer section

CSS Variables

• --sb-drawer-width - Width for horizontal drawers
• --sb-drawer-height - Height for vertical drawers

Examples

Basic Usage

<SbButton OnClick="() => isOpen = true">Open Drawer</SbButton>

<SbDrawer @bind-Open="isOpen" Title="Menu">
    <p>Drawer content</p>
</SbDrawer>

@code {
    private bool isOpen = false;
}

Different Placements

<SbDrawer @bind-Open="leftOpen" Placement="SbDrawerPlacement.Start" Title="Left Drawer">
    Left side content
</SbDrawer>

<SbDrawer @bind-Open="rightOpen" Placement="SbDrawerPlacement.End" Title="Right Drawer">
    Right side content
</SbDrawer>

<SbDrawer @bind-Open="topOpen" Placement="SbDrawerPlacement.Top" Title="Top Drawer">
    Top content
</SbDrawer>

<SbDrawer @bind-Open="bottomOpen" Placement="SbDrawerPlacement.Bottom" Title="Bottom Drawer">
    Bottom content
</SbDrawer>

Custom Width

<SbDrawer @bind-Open="isOpen" 
          Title="Wide Drawer" 
          Width="500px">
    <p>This drawer is 500px wide.</p>
</SbDrawer>

Navigation Drawer

<SbDrawer @bind-Open="navOpen" Title="Navigation">
    <SbNavMenu>
        <SbNavItem Href="/" Text="Home" OnClick="() => navOpen = false">
            <Icon><SbIcon Name="home" /></Icon>
        </SbNavItem>
        <SbNavItem Href="/products" Text="Products" OnClick="() => navOpen = false">
            <Icon><SbIcon Name="box" /></Icon>
        </SbNavItem>
        <SbNavItem Href="/about" Text="About" OnClick="() => navOpen = false">
            <Icon><SbIcon Name="info" /></Icon>
        </SbNavItem>
    </SbNavMenu>
</SbDrawer>

Filter Drawer

<SbDrawer @bind-Open="filterOpen" 
          Placement="SbDrawerPlacement.End" 
          Title="Filters"
          Width="400px">
    <ChildContent>
        <SbStack Gap="4">
            <SbSelect Label="Category" @bind-Value="filter.Category">
                <SbSelectOption Value="">All</SbSelectOption>
                <SbSelectOption Value="electronics">Electronics</SbSelectOption>
                <SbSelectOption Value="clothing">Clothing</SbSelectOption>
            </SbSelect>
            
            <SbSlider Label="Price Range" 
                      Min="0" Max="1000" 
                      @bind-Value="filter.MaxPrice" />
            
            <SbCheckbox Label="In Stock Only" @bind-Value="filter.InStock" />
        </SbStack>
    </ChildContent>
    <Footer>
        <SbStack Direction="SbStackDirection.Row" Gap="2">
            <SbButton Variant="SbButtonVariant.Outline" OnClick="ClearFilters">
                Clear
            </SbButton>
            <SbButton OnClick="ApplyFilters">Apply Filters</SbButton>
        </SbStack>
    </Footer>
</SbDrawer>

Cart Drawer

<SbDrawer @bind-Open="cartOpen" 
          Placement="SbDrawerPlacement.End" 
          Title="Shopping Cart"
          Width="420px">
    <ChildContent>
        @if (cartItems.Any())
        {
            <SbStack Gap="3">
                @foreach (var item in cartItems)
                {
                    <SbCard>
                        <SbStack Direction="SbStackDirection.Row" Gap="3">
                            <img src="@item.Image" alt="@item.Name" width="60" />
                            <SbStack Gap="1">
                                <SbText Weight="semibold">@item.Name</SbText>
                                <SbText>@item.Price.ToString("C")</SbText>
                            </SbStack>
                        </SbStack>
                    </SbCard>
                }
            </SbStack>
        }
        else
        {
            <SbEmptyState Title="Cart Empty" Description="Add items to your cart" />
        }
    </ChildContent>
    <Footer>
        <SbStack Gap="3">
            <SbStack Direction="SbStackDirection.Row" Justify="SbJustify.SpaceBetween">
                <SbText Weight="semibold">Total:</SbText>
                <SbText Weight="semibold">@cartTotal.ToString("C")</SbText>
            </SbStack>
            <SbButton FullWidth="true">Checkout</SbButton>
        </SbStack>
    </Footer>
</SbDrawer>

Non-Modal Drawer

<SbDrawer @bind-Open="isOpen" 
          Title="Side Panel" 
          Modal="false">
    <p>This drawer doesn't have a backdrop overlay.</p>
</SbDrawer>