Skip to content

Sheet

Sheet is a mobile-first bottom panel component built on top of Drawer. It defaults to bottom placement and rounded top corners.

Quick Start

from faststrap import Button, Sheet

Button(
    "Open actions",
    data_bs_toggle="offcanvas",
    data_bs_target="#mobileActions",
)

Sheet(
    "Quick actions go here",
    sheet_id="mobileActions",
    title="Actions",
)

Notes

  • Sheet wraps Drawer with placement="bottom".
  • Pass height to control panel height (for example "50%", "70vh").
  • Other Drawer kwargs such as backdrop and scroll are supported.

Parameters

Parameter Type Default Description
*children Any Required Sheet content
sheet_id str \| None None ID used by trigger target
title str \| None None Optional header title
height str "auto" CSS height for the sheet
**kwargs Any - Forwarded to Drawer

faststrap.components.display.sheet.Sheet(*children, sheet_id=None, title=None, height='auto', **kwargs)

A mobile-native "Bottom Sheet" component.

This is a wrapper around Drawer with specific styling to look like a bottom sheet (rounded top corners, bottom placement).

Parameters:

Name Type Description Default
*children Any

Content

 ()
sheet_id str | None

Unique ID

 None
title str | None

Title

 None
height str

CSS height value (default: auto)

 'auto'
**kwargs Any

Arguments passed to Drawer

 {}
Source code in src/faststrap/components/display/sheet.py 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
@register(category="display", requires_js=True)
def Sheet(
    *children: Any,
    sheet_id: str | None = None,
    title: str | None = None,
    height: str = "auto",  # auto, 50%, 100%
    **kwargs: Any,
) -> Div:
    """
    A mobile-native "Bottom Sheet" component.

    This is a wrapper around `Drawer` with specific styling to look like
    a bottom sheet (rounded top corners, bottom placement).

    Args:
        *children: Content
        sheet_id: Unique ID
        title: Title
        height: CSS height value (default: auto)
        **kwargs: Arguments passed to Drawer
    """
    # Force placement to bottom
    kwargs["placement"] = "bottom"

    # Custom class for sheet styling (rounded corners)
    user_cls = kwargs.pop("cls", "")
    sheet_cls = "rounded-top-4"  # Bootstrap 5 utility for large top rounding

    # Add handle visual
    # We inject a small handle at the top of the body or header
    # But since Drawer structure is rigid, we'll just style the container

    # Merge classes
    final_cls = merge_classes(sheet_cls, user_cls)

    # Custom styles
    user_style = kwargs.pop("style", {})
    if isinstance(user_style, dict):
        if height != "auto":
            user_style["height"] = height
            user_style["max-height"] = "90vh"  # Never full full screen to keep context
    elif isinstance(user_style, str):
        style_str = user_style.strip()
        if height != "auto":
            sheet_height = f"height: {height}; max-height: 90vh;"
            user_style = f"{sheet_height} {style_str}" if style_str else sheet_height
        else:
            user_style = style_str

    return Drawer(
        *children, drawer_id=sheet_id, title=title, cls=final_cls, style=user_style, **kwargs
    )