Dialog

En/ Ru

Dialog

Wireframe модального диалога (data-ui8kit dialog).

github.com/fastygo/templ/ui

Wireframe модального диалога (data-ui8kit dialog).

По умолчанию

Заголовок диалога

Описание диалога.

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Box(ui.BoxProps{Class: "max-w-sm rounded-lg border border-border bg-card p-4 shadow-lg", Attrs: templ.Attributes{"data-ui8kit": "dialog"}}) {
		@ui.Title(ui.TitleProps{Order: 3, Class: "text-base font-semibold"}, "Заголовок диалога")
		@ui.Text(ui.TextProps{Class: "text-sm text-muted-foreground"}, "Описание диалога.")
		@ui.Group(ui.GroupProps{Class: "mt-4 flex justify-end gap-2"}) {
			@ui.Button(ui.ButtonProps{Variant: "outline", Attrs: templ.Attributes{"data-ui8kit-close": ""}}) {
				Отмена
			}
			@ui.Button(ui.ButtonProps{Attrs: templ.Attributes{"data-ui8kit-close": ""}}) {
				Подтвердить
			}
		}
	}
}

API

Attrs · templ.Attributes — data-ui8kit=dialog

Title · Title — Цель для aria-labelledby