shadcn-templ

Drawer

A drawer component that slides in from the edge of the screen.

templ
templ DrawerDemo() {
	@ui.Drawer("", nil) {
		@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.DrawerTriggerAttrs) {
			Open Drawer
		}
		@ui.DrawerContent("", nil) {
			@ui.DrawerHeader("", nil) {
				@ui.DrawerTitle("", nil) {
					Move Goal
				}
				@ui.DrawerDescription("", nil) {
					Set your daily activity goal.
				}
			}
			<div class="p-4 pb-0">
				<div class="flex items-center justify-center space-x-2">
					<div class="flex-1 text-center">
						<div class="text-7xl font-bold tracking-tighter">350</div>
						<div class="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
					</div>
				</div>
			</div>
			@ui.DrawerFooter("", nil) {
				@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
					Submit
				}
				@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.DrawerCloseAttrs) {
					Cancel
				}
			}
		}
	}
}