Quaff

QSideSheet

Side sheets present details, filters, or tools beside the main content. Keep the page interactive or use a modal sheet to focus attention.

YOUR WORKSPACE

Ready to launch

Launch checklist
1 of 2 complete

Select the checklist to see its details.

Task details

DS
Design system
Release checklist
info QSideSheet API Source

interface QSideSheetProps extends HTMLAttributes<HTMLDialogElement>

bordered
?: boolean = false
Whether the component should have a border.

closeLabel
?: string = "Close sheet"
Accessible label for the close button.

detached
?: boolean = false
Insets the sheet by 16px and rounds all corners.

headline
?: string = undefined
The sheet heading. Otherwise, provide aria-label or aria-labelledby.

modal
?: boolean = false
Blocks interaction with the page until the sheet closes.

side
?: "start" | "end" = "end"
The logical side of the container, mirrored in right-to-left layouts.

value
?: boolean = $bindable(false)
The bound value of the component.

width
?: string | number = "256px"
The width, up to 400px. Numbers use pixels; CSS units are also accepted.

Usage

Standard sheet
Select a file to edit its details alongside the list. Place the sheet in a flex row with a flexible main area, and bind value to control visibility. The default width is 256px; this example uses 320px.

Creative studio

Shared files · 3 items

Brand guidelines
Document · Today
keep
Spring campaign
Presentation · Yesterday
Content calendar
Spreadsheet · Sep 12

Select a file to open its details.

File details

Document
AL
Alex Lee
Owner · Creative studio
Pin to workspace
Placement and shape
Sheets open at the logical end edge by default. Set side="start" to use the leading edge; both follow the reading direction. Add detached for rounded corners and space around the sheet.

Your reading space

Make yourself comfortable.

Preferences

Reading hints

Show helpful notes while you read.