AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Tabs
A set of layered sections of content — known as tab panels — that are displayed one at a time.
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
templ
templ TabsDemo() {
@ui.Tabs("account", "w-[400px]", nil) {
@ui.TabsList("grid w-full grid-cols-2", nil) {
@ui.TabsTrigger("account", "", nil) {
Account
}
@ui.TabsTrigger("password", "", nil) {
Password
}
}
@ui.TabsContent("account", "", nil) {
@ui.Card("", nil) {
@ui.CardHeader("", nil) {
@ui.CardTitle("", nil) {
Account
}
@ui.CardDescription("", nil) {
Make changes to your account here. Click save when you're done.
}
}
@ui.CardContent("space-y-2", nil) {
<div class="space-y-1">
@ui.Label("", templ.Attributes{"for": "tab-name"}) {
Name
}
@ui.Input("name", ui.InputTypeText, "", templ.Attributes{"id": "tab-name", "value": "Pedro Duarte"})
</div>
<div class="space-y-1">
@ui.Label("", templ.Attributes{"for": "tab-username"}) {
Username
}
@ui.Input("username", ui.InputTypeText, "", templ.Attributes{"id": "tab-username", "value": "@peduarte"})
</div>
}
@ui.CardFooter("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
Save changes
}
}
}
}
@ui.TabsContent("password", "", nil) {
@ui.Card("", nil) {
@ui.CardHeader("", nil) {
@ui.CardTitle("", nil) {
Password
}
@ui.CardDescription("", nil) {
Change your password here. After saving, you'll be logged out.
}
}
@ui.CardContent("space-y-2", nil) {
<div class="space-y-1">
@ui.Label("", templ.Attributes{"for": "tab-current"}) {
Current password
}
@ui.Input("current", ui.InputTypePassword, "", templ.Attributes{"id": "tab-current"})
</div>
<div class="space-y-1">
@ui.Label("", templ.Attributes{"for": "tab-new"}) {
New password
}
@ui.Input("new", ui.InputTypePassword, "", templ.Attributes{"id": "tab-new"})
</div>
}
@ui.CardFooter("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
Save password
}
}
}
}
}
}