ui

package
v0.1.1 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Oct 25, 2026 License: Apache-2.0 Imports: 15 Imported by: 0

Documentation

Overview

templ: version: v0.3.1070

Package ui holds the default design and the types default pages use to render inside an app's layout.

Apps choose how much of the default design to keep:

  • Use it unchanged with Default.
  • Restyle it: link a stylesheet that overrides the design tokens, and set the favicon, navigation and footer through Design.
  • Replace it: write a Layout with the app's own markup and CSS. Default pages then render inside it, using the component classes base.css defines.

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func CSRFField

func CSRFField(c *gin.Context) templ.Component

CSRFField is the hidden field every state-changing form needs.

func Dialog

func Dialog(p DialogProps) templ.Component

Dialog renders a native modal dialog. Its error slot (.dialog-error) receives error fragments from HTMX requests issued inside it.

func ErrorSlot

func ErrorSlot() templ.Component

ErrorSlot is where an HTMX form shows an error response.

func FormError

func FormError(text string) templ.Component

FormError renders an error message for an ErrorSlot.

func Head(c *gin.Context, assets *Assets) templ.Component

Head renders what every layout's <head> needs for default pages to work: the CSRF token for HTMX requests, HTMX and the default page script. Custom layouts include it.

func LiveRegion

func LiveRegion() templ.Component

LiveRegion is the polite status region the page script announces results in. Custom layouts include it once, at the end of <body>.

func Render

func Render(c *gin.Context, status int, component templ.Component)

Render writes an HTML component, such as an HTMX fragment, with the given status.

func Spinner

func Spinner() templ.Component

Spinner shows while its button or form is busy.

Types

type Assets

type Assets struct {
	// contains filtered or unexported fields
}

Assets serves static files under a base path, with a content hash in every URL so browsers can cache them for a year. A request for an outdated hash gets the current file uncached, so pages rendered by the previous release keep working during a rolling deploy.

func NewAssets

func NewAssets(base string) *Assets

NewAssets returns assets served under base, such as "/assets". It already holds the default design's files under the "ui" prefix.

func (*Assets) Add

func (a *Assets) Add(prefix string, files fs.FS) error

Add serves every file in files under prefix: files/app.css becomes "prefix/app.css". Adding the same files again is a no-op; adding other files under a used prefix is an error.

func (*Assets) Serve

func (a *Assets) Serve(c *gin.Context)

Serve handles GET requests under the base path. Register it with a wildcard:

r.GET("/assets/*path", assets.Serve)

func (*Assets) URL

func (a *Assets) URL(name string) string

URL returns the hashed URL of a file, such as "/assets/3f2a9c01be44/ui/base.css". It panics for an unknown name, which is a programming error.

type Design

type Design struct {
	// Name appears in the header and in every page title.
	Name string
	// Nav links appear in the header. The link matching the current path is marked.
	Nav []Link
	// Head is extra content for <head>, such as a favicon or meta tags.
	Head templ.Component
	// Stylesheets are linked after the default stylesheet, so they can override its
	// design tokens.
	Stylesheets []string
	// Footer replaces the default footer.
	Footer templ.Component
}

Design customises the default layout.

type DialogProps

type DialogProps struct {
	ID    string
	Title string
	// Danger styles the dialog for a destructive action.
	Danger bool
	// Autoshow opens the dialog as soon as it is rendered or swapped in.
	Autoshow bool
	// Ephemeral clears the dialog's [data-secret] text when it closes, for values
	// such as a new API key that must be shown only once.
	Ephemeral bool
}

DialogProps describes a modal dialog.

type Layout

type Layout struct {
	// Page wraps a page's body in the app's document: head, navigation and footer.
	Page func(c *gin.Context, title string, body templ.Component) templ.Component
	// Assets serves the stylesheets and scripts pages link to.
	Assets *Assets
}

Layout is everything a default page needs from the app's design.

func Default

func Default(d Design, assets *Assets) Layout

Default returns the default layout with the given customisations.

func (Layout) Error

func (l Layout) Error(c *gin.Context, status int, title, text string)

Error renders a short message page in the layout with the given status.

func (Layout) NotFound

func (l Layout) NotFound(c *gin.Context)

NotFound renders a 404 page in the layout. Apps can use it as their NoRoute handler.

func (Layout) Render

func (l Layout) Render(c *gin.Context, status int, title string, body templ.Component)

Render writes a full page with the given status.

type Link struct {
	Label string
	Href  string
}

Link is a navigation link.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL