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 ¶
- func CSRFField(c *gin.Context) templ.Component
- func Dialog(p DialogProps) templ.Component
- func ErrorSlot() templ.Component
- func FormError(text string) templ.Component
- func Head(c *gin.Context, assets *Assets) templ.Component
- func LiveRegion() templ.Component
- func Render(c *gin.Context, status int, component templ.Component)
- func Spinner() templ.Component
- type Assets
- type Design
- type DialogProps
- type Layout
- type Link
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
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 Head ¶
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 ¶
LiveRegion is the polite status region the page script announces results in. Custom layouts include it once, at the end of <body>.
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 ¶
NewAssets returns assets served under base, such as "/assets". It already holds the default design's files under the "ui" prefix.
func (*Assets) Add ¶
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.
type Design ¶
type Design struct {
// Name appears in the header and in every page title.
Name string
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 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.