Sheet

Sheet composes a side panel with trigger, overlay, content, and close parts.

github.com/fastygo/templ/components

Summary

Sheet composes a side panel with trigger, overlay, content, and close parts.Behavior hooks are opt-in through Behavior.

Use Cases

Render mobile navigation panels

Render settings and inspector side panels

Semantics

Sheet root uses role dialog and aria-modal true

Trigger wires aria-haspopup, aria-controls, and aria-expanded

Behavior ui8kit adds data-ui8kit dialog hooks

Example side.left

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.SheetTrigger(cmp.SheetTriggerProps{For: "demo-sheet", AriaLabel: "Open navigation"}) { Menu }
	@cmp.Sheet(cmp.SheetProps{ID: "demo-sheet", Side: "left", AriaLabel: "Navigation"}) {
		@cmp.SheetContent(cmp.SheetContentProps{}) {
			Navigation
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.SheetTrigger(cmp.SheetTriggerProps{For: "demo-sheet", AriaLabel: "Open navigation"}) { Menu }
	@cmp.Sheet(cmp.SheetProps{ID: "demo-sheet", Side: "left", AriaLabel: "Navigation"}) {
		@cmp.SheetContent(cmp.SheetContentProps{}) {
			Navigation
		}
	}
}

Example behavior.ui8kit

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.SheetTrigger(cmp.SheetTriggerProps{For: "demo-sheet", Behavior: "ui8kit"}) { Open }
	@cmp.Sheet(cmp.SheetProps{ID: "demo-sheet", Behavior: "ui8kit", AriaLabel: "Panel"}) {
		@cmp.SheetOverlay(cmp.SheetOverlayProps{For: "demo-sheet", Behavior: "ui8kit"})
		@cmp.SheetContent(cmp.SheetContentProps{}) { Panel }
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.SheetTrigger(cmp.SheetTriggerProps{For: "demo-sheet", Behavior: "ui8kit"}) { Open }
	@cmp.Sheet(cmp.SheetProps{ID: "demo-sheet", Behavior: "ui8kit", AriaLabel: "Panel"}) {
		@cmp.SheetOverlay(cmp.SheetOverlayProps{For: "demo-sheet", Behavior: "ui8kit"})
		@cmp.SheetContent(cmp.SheetContentProps{}) { Panel }
	}
}

API

Behavior · string — role: behavior-hook; enum: |ui8kit

Side · string — role: placement; enum: left|right|top|bottom; default: right

Size · string — role: density; enum: sm|default|md|lg|xl|full; default: default

Variant · string — role: appearance; enum: default|card|ghost|unstyled; default: default; source: components.sheet.SheetVariants