Quaff

QBottomSheet

Bottom sheets present supporting content and actions at the bottom of the screen. Keep the page interactive or use a modal sheet.

Coffee by the river
Your next stop on a morning walk
Riverside Café
4.8 8 min walk

Coffee and pastries by the water.

Flat white
€3.80
Almond croissant
€3.20
info QBottomSheet API Source
interface QBottomSheetProps extends HTMLAttributes<HTMLElement>
collapseLabel
?: string = "Collapse sheet"
Accessible label for collapsing the sheet.
expandLabel
?: string = "Expand sheet"
Accessible label for expanding the sheet.
expanded
?: boolean = $bindable(false)
Expands the sheet to its available height.
modal
?: boolean = false
Blocks interaction with the page and adds a dismissible scrim.
value
?: boolean = $bindable(false)
The bound value of the component.

Usage

Standard Bottom Sheet
Standard sheets keep the rest of the page interactive. Place one inside a positioned container, then drag or select its handle to expand or collapse it.
Plan your visit · Saturday, 10:00
Riverside Café
Coffee & pastries · 8 min walk
Nearby places

Good food, a little fresh air, and somewhere new.

Riverside Café
Coffee & pastries · 8 min walk
The Botanist
Brunch in the courtyard · 12 min walk
Market Garden
Seasonal food & fresh flowers · 15 min walk
Composing with Other Components
Add form controls and actions to your sheet. Give it an accessible name with aria-label or aria-labelledby.
Travel preferences
Your next stop
Riverside Café
Take the scenic route
Journey reminders

We’ll remind you 15 minutes before your Saturday visit.

Privacy Policy