Sheet

Guidelines
React API Reference
Blazor API Reference

Sheets are slide-out panels that extend from the edges of the screen to display supplementary content or actions. They provide additional context without navigating away from the current page, making them ideal for secondary tasks, detailed views, or configuration panels.

Guidance

Aspect	Best Practice
Usage	Use sheets for secondary content, detailed views, or actions that support the main workflow without replacing it.
Content	Organize content hierarchically with clear headers, sections, and actions. Keep the most important information visible without scrolling.
Behavior	Sheets slide in from screen edges (top, right, bottom, left) and can be dismissed by clicking outside, using escape key, or explicit close actions.
Positioning	Choose the appropriate edge based on content type and user flow. Right-side sheets are common for details, left-side for navigation.
Hierarchy	Use overlay to indicate the sheet is above the main content while maintaining context of the underlying page.
Examples	Settings panels, detailed item views, filters, navigation menus, or form wizards.

Best Practices

Positioning: Choose the appropriate edge based on content and user expectations. Right-side sheets work well for details, left-side for navigation.
Dismissal: Provide multiple dismissal methods (overlay click, escape key, close button) to accommodate different user preferences.
Responsive Design: Consider how sheets behave on different screen sizes and adjust accordingly.

Do’s and Don’ts

Do

Use sheets for supplementary content that supports the main workflow.
Choose the appropriate edge based on content type and user flow.
Provide clear navigation and actions within the sheet.

Don't

Use sheets for critical actions that must be completed.
Overcrowd sheets with too much content or complex layouts.
Use sheets as the primary navigation method.

Additional Guidance

Accessibility: Ensure proper focus management when sheets open and close. The sheet should trap focus when open and return focus to the trigger when closed.
Psychological Impact:
- Contextual Continuity: Sheets maintain visual connection to the main content, reducing cognitive load.
- Progressive Disclosure: They reveal additional information on demand without overwhelming the primary interface.
- Spatial Awareness: The slide-in animation helps users understand the relationship between the sheet and the main content.

Import

  import {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from 'studs-react';

Usage

Example

<Sheet>
    <SheetTrigger asChild>
    <Button variant="outline">
        Open
    </Button>
    </SheetTrigger>
    <SheetContent side="end">
    <SheetHeader>
        <SheetTitle>
        Edit profile
        </SheetTitle>
        <SheetDescription>
        Make changes to your profile here. Click save when you're done.
        </SheetDescription>
    </SheetHeader>
    // Content
    <SheetFooter>
        <SheetClose asChild>
        <Button type="submit">
            Save changes
        </Button>
        </SheetClose>
    </SheetFooter>
    </SheetContent>
</Sheet>

`<Sheet>` Props

defaultOpen

boolean

default:"false"

If true, the sheet will be open by default.

open

boolean

If true, the sheet will be open.

onOpenChange

function

Callback function that is called when the open state changes.

When set to true, interaction with outside elements will be disabled and only sheet content will be visible to screen readers.

`<SheetPortal>` Props

forceMount

boolean

Used to force mounting when more control is needed.

container

HTMLElement

default:"document.body"

The container element to render the sheet into.

`<SheetOverlay>` Props

asChild

boolean

default:"false"

If true, the overlay will render as a child component.

forceMount

boolean

Used to force mounting when more control is needed.

`<SheetContent>` Props

asChild

boolean

default:"false"

If true, the content will render as a child component.

forceMount

boolean

default:"false"

If true, the content will always be mounted in the DOM.

side

top | start | bottom | end

default:"end"

The edge of the screen where the sheet will appear.

onOpenAutoFocus

function

Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.

onCloseAutoFocus

function

Event handler called when focus moves to the trigger after closing. It can beprevented by calling event.preventDefault.

onEscapeKeyDown

function

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

onPointerDownOutside

function

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

onInteractOutside

function

Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault.

`<SheetClose>`, `<SheetTitle>`, `<SheetDescription>`, `<SheetHeader>`, `<SheetFooter>`, `<SheetTrigger>` Props

asChild

boolean

default:"false"

If true, the close button will render as a child component.

Styling Classes

The component applies the following CSS classes:

sheet-overlay - Applied to the overlay component
sheet - Base sheet class for the content
sheet-close-button - Applied to the close button
sheet-close-icon - Applied to the close icon
sheet-header - Applied to the header component
sheet-footer - Applied to the footer component
sheet-title - Applied to the title component
sheet-description - Applied to the description component

For examples, visit the Storybook.

Example

@inject DialogService DialogService

await DialogService.OpenSheetAsync<T>(Title, options: new SheetDialogOptions {
    Title = Title,
    Position = Position,
    ShowMask = ShowMask,
    AutoFocusFirstElement = AutoFocusFirstElement,
    ShowTitle = ShowTitle,
    ShowClose = ShowClose,
    Width = Width,
    Height = Height,
    Style = Style,
    CloseDialogOnOverlayClick = CloseDialogOnOverlayClick,
    CssClass = CssClass,
    WrapperCssClass = WrapperCssClass,
    ContentCssClass = ContentCssClass,
    CloseTabIndex = CloseTabIndex
});

DialogService Methods

OpenSheetAsync<T>(string title, Dictionary<string, object> parameters = null, SheetDialogOptions options = null)

Task<dynamic>

Opens a sheet dialog with the specified component type and parameters.

OpenSheetAsync(string title, RenderFragment<DialogService> childContent, SheetDialogOptions options = null)

Task<dynamic>

Opens a sheet dialog with custom content using a RenderFragment.

CloseSheet(dynamic result = null)

void

Closes the currently open sheet dialog with an optional result.

`SheetDialogOptions` Parameters

Title

string

Gets or sets the title of the sheet.

Position

DialogPosition

default:"DialogPosition.End"

Gets or sets the position of the sheet (Start, End, Top, Bottom).

ShowMask

bool

default:"true"

Gets or sets a value indicating whether to show the overlay mask behind the sheet.

AutoFocusFirstElement

bool

default:"false"

Gets or sets a value indicating whether to auto-focus the first focusable element when the sheet opens.

ShowTitle

bool

default:"true"

Gets or sets a value indicating whether to show the title bar in the sheet header.

ShowClose

bool

default:"true"

Gets or sets a value indicating whether to show the close button in the sheet header.

Width

string

Gets or sets the width of the sheet (e.g., “400px”, “50%”).

Height

string

Gets or sets the height of the sheet (e.g., “600px”, “80vh”).

Style

string

Gets or sets additional CSS styles to apply to the sheet.

CloseDialogOnOverlayClick

bool

default:"true"

Gets or sets a value indicating whether to close the sheet when the overlay is clicked.

CloseDialogOnEsc

bool

default:"true"

Gets or sets a value indicating whether to close the sheet when the Escape key is pressed.

CssClass

string

Gets or sets custom CSS classes to apply to the sheet container.

WrapperCssClass

string

Gets or sets CSS classes to apply to the sheet’s wrapper element.

ContentCssClass

string

Gets or sets CSS classes to apply to the sheet’s content area.

CloseTabIndex

int

default:"0"

Gets or sets the tab index for the close button.

ChildContent

RenderFragment<DialogService>

Gets or sets the content to display inside the sheet when using RenderFragment approach.

Usage Examples

@inject DialogService DialogService

<StudsButton Text="Open Basic Sheet" Click="@OpenBasicSheet" />

@code {
    async Task OpenBasicSheet()
    {
        await DialogService.OpenSheetAsync<MySheetContent>("Basic Sheet",
            options: new SheetDialogOptions {
                Position = DialogPosition.End,
                Width = "300px"
            });
    }
}

Styling Classes

The following CSS classes are applied by the Sheet components:

sheet – Root sheet container with positioning
sheet.-start – Left-positioned sheet modifier
sheet.-end – Right-positioned sheet modifier
sheet.-top – Top-positioned sheet modifier
sheet.-bottom – Bottom-positioned sheet modifier
dialog-titlebar – Title bar container
dialog-title – Title text styling
dialog-titlebar-close – Close button in title bar
dialog-content – Main content area
dialog-mask – Background overlay/mask

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<Sheet>` Props

`<SheetPortal>` Props

`<SheetOverlay>` Props

`<SheetContent>` Props

`<SheetClose>`, `<SheetTitle>`, `<SheetDescription>`, `<SheetHeader>`, `<SheetFooter>`, `<SheetTrigger>` Props

Styling Classes

DialogService Methods

`SheetDialogOptions` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<Sheet> Props

​<SheetPortal> Props

​<SheetOverlay> Props

​<SheetContent> Props

​<SheetClose>, <SheetTitle>, <SheetDescription>, <SheetHeader>, <SheetFooter>, <SheetTrigger> Props

​Styling Classes

​DialogService Methods

​SheetDialogOptions Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<Sheet>` Props

`<SheetPortal>` Props

`<SheetOverlay>` Props

`<SheetContent>` Props

`<SheetClose>`, `<SheetTitle>`, `<SheetDescription>`, `<SheetHeader>`, `<SheetFooter>`, `<SheetTrigger>` Props

Styling Classes

DialogService Methods

`SheetDialogOptions` Parameters

Usage Examples

Styling Classes