Documentation
¶
Overview ¶
Package component provides individual UI components generated from templ source code.
Index ¶
- func Card(slots CardSlots) templ.Component
- func ConfirmDialog(props ConfirmDialogProps) templ.Component
- func EmptyState(props EmptyStateProps) templ.Component
- func ErrorBanner(props ErrorBannerProps) templ.Component
- func Form(props FormProps) templ.Component
- func IconArrowLeft(class string) templ.Component
- func IconCard(class string) templ.Component
- func IconCheck(class string) templ.Component
- func IconCheckHidden(id, class string) templ.Component
- func IconChevronRight(class string) templ.Component
- func IconCopy(id, class string) templ.Component
- func IconDashboard(class string) templ.Component
- func IconDownload(class string) templ.Component
- func IconEye(id, class string) templ.Component
- func IconEyeSlash(id, class string) templ.Component
- func IconKey(class string) templ.Component
- func IconLock(class string) templ.Component
- func IconLogout(class string) templ.Component
- func IconMenu(class string) templ.Component
- func IconNote(class string) templ.Component
- func IconPlus(class string) templ.Component
- func IconSearch(class string) templ.Component
- func IconTool(class string) templ.Component
- func IconTrash(class string) templ.Component
- func IconUpload(class string) templ.Component
- func IconUser(class string) templ.Component
- func IconWarning(class string) templ.Component
- func ListItem(props ListItemProps) templ.Component
- func PageHeader(props PageHeaderProps) templ.Component
- func SearchBar(props SearchBarProps) templ.Component
- func Sidebar(props SidebarProps) templ.Component
- func SidebarItem(href string, label string, active bool) templ.Component
- func ValidationBanner(props ValidationBannerProps) templ.Component
- type CardSlots
- type ConfirmDialogProps
- type EmptyStateProps
- type ErrorBannerProps
- type FormProps
- type ListItemProps
- type PageHeaderProps
- type SearchBarProps
- type SidebarProps
- type ValidationBannerProps
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Card ¶
Card renders a divided card with header, body, and footer sections separated by dividers. Any nil slot is omitted entirely.
func ConfirmDialog ¶
func ConfirmDialog(props ConfirmDialogProps) templ.Component
ConfirmDialog renders a styled modal confirmation dialog. Open it by calling showConfirmDialog('<id>') from an onclick handler. Optional children are rendered inside the form between the message and the action buttons, allowing extra fields (e.g. a password confirmation input) to be included in the submission.
func EmptyState ¶
func EmptyState(props EmptyStateProps) templ.Component
EmptyState renders a centred empty-state card. Pass the icon SVG as children.
func ErrorBanner ¶
func ErrorBanner(props ErrorBannerProps) templ.Component
ErrorBanner renders a red error banner. Nothing is rendered when Message is empty. When Detail is set it is shown inside a collapsible <details> element.
func Form ¶
Form renders a POST form with an optional validation banner, with the provided children rendered inside.
func IconArrowLeft ¶
IconArrowLeft renders a left-pointing arrow SVG icon.
func IconCheckHidden ¶
IconCheckHidden renders a checkmark SVG icon with the given id, initially hidden via inline style. Used as the success state of copy-to-clipboard buttons.
func IconChevronRight ¶
IconChevronRight renders a right-pointing chevron SVG icon.
func IconCopy ¶
IconCopy renders a clipboard copy SVG icon with the given id. Used as the default state of copy-to-clipboard buttons.
func IconDashboard ¶
IconDashboard renders a dashboard grid SVG icon.
func IconDownload ¶
IconDownload renders an arrow-down-tray SVG icon, used for export/download actions.
func IconEye ¶
IconEye renders an open eye SVG icon with the given id. Used as the visible state of show/hide toggles.
func IconEyeSlash ¶
IconEyeSlash renders a crossed-out eye SVG icon with the given id, initially hidden via inline style. Used as the hidden state of show/hide toggles.
func IconLogout ¶
IconLogout renders an arrow-right-on-rectangle SVG icon, used for sign-out actions.
func IconSearch ¶
IconSearch renders a magnifying glass SVG icon.
func IconUpload ¶
IconUpload renders an arrow-up-tray SVG icon, used for import/upload actions.
func IconWarning ¶
IconWarning renders a warning triangle SVG icon.
func ListItem ¶
func ListItem(props ListItemProps) templ.Component
ListItem renders a full-row clickable link with an optional leading element (passed as children), a title, an optional subtitle, and a trailing chevron.
func PageHeader ¶
func PageHeader(props PageHeaderProps) templ.Component
PageHeader renders a sticky page header with a title, subtitle, and optional action and search slots.
func SearchBar ¶
func SearchBar(props SearchBarProps) templ.Component
SearchBar renders a GET search form with a text input and a submit button.
func Sidebar ¶
func Sidebar(props SidebarProps) templ.Component
Sidebar renders the application sidebar, including the branding header, navigation links, and user display.
func SidebarItem ¶
SidebarItem renders a single navigation link within the sidebar, highlighted when active.
func ValidationBanner ¶
func ValidationBanner(props ValidationBannerProps) templ.Component
ValidationBanner renders a yellow validation error banner listing all field errors. Nothing is rendered when Errors is empty.
Types ¶
type CardSlots ¶
type CardSlots struct {
// Header is rendered in the top section of the card.
Header templ.Component
// Body is rendered in the middle section of the card.
Body templ.Component
Footer templ.Component
}
The CardSlots type holds the three content sections rendered by the Card component.
type ConfirmDialogProps ¶
type ConfirmDialogProps struct {
// ID is the HTML id of the <dialog> element, used to open it from a button's onclick.
ID string
// Title is the heading shown inside the dialog.
Title string
// Message is the body text asking the user to confirm.
Message string
// ConfirmText is the label for the destructive confirm button. Defaults to "Confirm" when empty.
ConfirmText string
// Action is the POST URL submitted when the user confirms.
Action string
}
ConfirmDialogProps contains the fields used to configure a confirmation dialog.
type EmptyStateProps ¶
type EmptyStateProps struct {
// The heading text shown in the empty state.
Title string
// The supporting description shown below the title.
Description string
}
The EmptyStateProps type contains fields used to configure the EmptyState component.
type ErrorBannerProps ¶
type ErrorBannerProps struct {
// The user-friendly error message to display. The banner is not rendered when empty.
Message string
// The technical error detail shown in a collapsible section. Optional.
Detail string
}
The ErrorBannerProps type contains fields used to configure the ErrorBanner component.
type FormProps ¶
type FormProps struct {
// Action is the URL the form submits to.
Action string
// Class is the CSS class string applied to the <form> element.
Class string
// Validation contains any validation errors to display above the form fields. Nothing is rendered when Errors is empty.
Validation ValidationBannerProps
}
The FormProps type contains fields used to configure the Form component.
type ListItemProps ¶
type ListItemProps struct {
// Href is the URL the row navigates to when clicked.
Href string
// Title is the primary text displayed in the row.
Title string
// Subtitle is the optional secondary text displayed below the title. Omitted when empty.
Subtitle string
// TitleClass is an optional extra CSS class applied to the title element, e.g. "font-mono".
TitleClass string
}
The ListItemProps type contains fields used to configure a list item row.
type PageHeaderProps ¶
type PageHeaderProps struct {
// Title is the primary heading text.
Title string
// Subtitle is the supporting description shown below the title.
Subtitle string
// Action is an optional element rendered on the right side of the header row, e.g. an "Add" button.
Action templ.Component
// Search is an optional element rendered below the title row, e.g. a SearchBar.
Search templ.Component
}
The PageHeaderProps type contains fields used to configure the PageHeader component.
type SearchBarProps ¶
type SearchBarProps struct {
// Action is the form action URL, e.g. "/notes" or "/logins".
Action string
// Query is the current search value, preserved in the input between requests.
Query string
// Placeholder is the hint text shown inside the input when empty.
Placeholder string
}
The SearchBarProps type contains fields used to configure the search bar component.
type SidebarProps ¶
type SidebarProps struct {
// The current page identifier, used to highlight the active nav item.
CurrentPage string
// The display name of the authenticated user, shown at the bottom of the sidebar.
DisplayName string
// The server version string, displayed next to the branding in the header.
ServerVersion string
}
The SidebarProps type contains fields used to configure the Sidebar component.
type ValidationBannerProps ¶
type ValidationBannerProps struct {
// Errors contains validation error messages keyed by field name. The banner is not rendered when empty.
Errors map[string]string
}
The ValidationBannerProps type contains fields used to configure the ValidationBanner component.
Source Files