AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Drawer
A drawer component that slides in from the edge of the screen.
Move Goal
Set your daily activity goal.
350
Calories/day
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
}
}
}
}
}