elements

package
v1.0.2 Latest Latest
Warning

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

 Go to latest Published: Jan 12, 2026 License: MIT Imports: 4 Imported by: 0

Documentation

Overview

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

Index

Constants

View Source 
const ProgressUnset = -1

ProgressUnset indicates that a progress value is not set. Use this constant when you want to omit the attribute.

Variables

This section is empty.

Functions

func BaseElement 

func BaseElement(props BaseElementProps, content Items) templ.Component

BaseElement — generic HTML container. Atomic level: ATOM

BaseElement renders a generic HTML element with unified class and attribute handling.

func Block 

func Block(props BlockProps, content Items) templ.Component

Block renders a Bulma `.block` container.

func Box 

func Box(props BoxProps, content Items) templ.Component

Box renders a Bulma `.box` container.

func Button 

func Button(props ButtonProps, content Items) templ.Component

Button renders a Bulma `.button`.

func Buttons 

func Buttons(props ButtonsProps, content Items) templ.Component

Buttons renders a Bulma `.buttons` container.

func Content 

func Content(props ContentProps, content Items) templ.Component

Content renders a Bulma `.content` container. templ Content(props ContentProps, content Items) {

func Delete 

func Delete(props DeleteProps) templ.Component

Delete renders a Bulma delete button.

func Html 

func Html(content string) templ.Component

Html — raw HTML rendering helper. Atomic level: ATOM

Html renders trusted raw HTML content using templ.Raw. It exists as an infrastructure primitive to enable explicit HTML composition where templ-based component composition becomes impractical.

Html MUST be used only with trusted, pre-sanitized content. It does NOT perform escaping or validation and is intended primarily for page-level composition and low-level layout scenarios.

func Icon 

func Icon(props IconProps) templ.Component

Icon renders a Bulma icon.

func Image 

func Image(props ImageProps) templ.Component

Image renders a Bulma image component.

func Notification 

func Notification(props NotificationProps, content Items) templ.Component

Notification renders a Bulma notification container.

func Progress 

func Progress(props ProgressProps, content Items) templ.Component

Progress renders a Bulma progress bar.

func SkeletonBlock 

func SkeletonBlock(props SkeletonBlockProps, content Items) templ.Component

SkeletonBlock renders a skeleton block wrapper.

func SkeletonLines 

func SkeletonLines(props SkeletonLinesProps, content Items) templ.Component

SkeletonLines renders skeleton text line wrappers.

func Subtitle 

func Subtitle(props SubtitleProps, content Items) templ.Component

Subtitle renders a Bulma `.subtitle` typographic element.

func Table 

func Table(props TableProps, content Items) templ.Component

Table renders the table element.

func TableContainer 

func TableContainer(props TableContainerProps, content Items) templ.Component

TableContainer renders the table container.

func Tag 

func Tag(props TagProps, content Items) templ.Component

Tag renders a Bulma tag.

func Tags 

func Tags(props TagsProps, content Items) templ.Component

Tags renders a Bulma tags container.

func Title 

func Title(props TitleProps, content Items) templ.Component

Title renders a Bulma `.title` typographic element.

func Wrap 

func Wrap(p WrapProps, content Items) templ.Component

Wrap — low-level HTML wrapper primitive.

Wrap is a low-level HTML serializer with escaping and boolean attribute semantics.

MUST NOT be used directly by application code.

Types

type BaseElementProps 

type BaseElementProps struct {
	// Tag defines the HTML tag name to render.
	Tag string

	// BaseClasses defines CSS classes
	// applied by the component itself.
	BaseClasses []string

	// Attr contains additional HTML attributes.
	Attr templ.Attributes
}

BaseElementProps defines common rendering parameters for generic HTML container elements.

type BlockProps 

type BlockProps struct {
	// Attr contains additional HTML attributes for the `.block` container.
	Attr templ.Attributes
}

Block — Bulma block element. Atomic level: ATOM

Block defines a simple spacing container that adds vertical margin between elements using the Bulma `.block` class.

This component does not manage layout or content semantics and serves as a low-level UI primitive.

type BoxProps 

type BoxProps struct {
	// Attr contains additional HTML attributes for the `.box` container.
	Attr templ.Attributes
}

Box — Bulma box element. Atomic level: ATOM

Box defines a visual container that provides padding, border radius, and shadow using the Bulma `.box` class.

This component is content-based and does not manage layout, behavior, or semantics.

type ButtonProps 

type ButtonProps struct {
	// Href defines the link URL.
	// When empty, a native <button> element is rendered.
	Href string

	// Type defines the button type attribute.
	// Applicable only when rendering <button>.
	// (button | submit | reset)
	Type string

	// Color defines the Bulma color modifier.
	Color string

	// Size defines the Bulma size modifier.
	Size string

	// State defines the Bulma state modifier
	// (is-hovered, is-focused, is-active, is-loading).
	State string

	// FullWidth applies the `is-fullwidth` modifier.
	FullWidth bool

	// Disabled applies the disabled state.
	//
	// For <a> elements, this is purely visual.
	// For <button> elements, the native `disabled`
	// attribute is applied.
	Disabled bool

	// Attr contains additional HTML attributes.
	Attr templ.Attributes
}

Button — Bulma button component. Atomic level: ATOM

Button renders a Bulma `.button` element.

The component renders either an `<a>` or a `<button>` depending on whether Href is provided.

This component is purely presentational and does NOT:

  • manage state
  • infer behavior
  • render icons implicitly

Icons MUST be composed explicitly via the Icon component.

type ButtonsProps 

type ButtonsProps struct {
	// HasAddons applies the `has-addons` modifier.
	HasAddons bool

	// Align defines alignment modifier
	// (is-centered, is-right).
	Align string

	// Attr contains additional HTML attributes.
	Attr templ.Attributes
}

Buttons — Bulma buttons container. Atomic level: MOLECULE

Buttons renders a `.buttons` wrapper used to group multiple Button components.

type ContentProps 

type ContentProps struct {
	// Size defines the typography size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the `.content` container.
	Attr templ.Attributes
}

Content — Bulma typographic container. Atomic level: ATOM

Content applies Bulma typography styles to all nested HTML elements (headings, lists, tables, code blocks, etc.).

This component is used for articles, documentation, FAQ sections, and SEO-oriented content.

type DeleteProps 

type DeleteProps struct {
	// Size defines the delete button size
	// (is-small, is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the <button> element.
	Attr templ.Attributes
}

Delete — Bulma delete button. Atomic level: ATOM

Delete renders a Bulma `.delete` element as a native <button>. It does not contain text, state, or behavior logic.

Any interaction (Alpine.js, aria-*, data-*) must be provided via Attr.

type IconProps 

type IconProps struct {
	// IconClass defines the icon CSS classes
	// (e.g. "fas fa-home").
	IconClass string

	// Size defines the icon size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Color defines the text color helper
	// (has-text-primary, has-text-danger, etc.).
	Color string

	// Attr contains additional HTML attributes
	// for the `.icon` wrapper.
	Attr templ.Attributes
}

Icon — Bulma icon element. Atomic level: ATOM

Icon renders a Bulma `.icon` wrapper with a nested <i> element. This component is intentionally minimal and does not manage text or layout composition.

For icon + text combinations, use explicit composition with the Bulma `.icon-text` pattern.

type ImageProps 

type ImageProps struct {
	// Src defines the image source URL.
	// This field is required.
	Src string

	// Alt defines the alternative text for accessibility.
	// This field is required.
	Alt string

	// Ratio defines the aspect ratio modifier
	// (is-square, is-16by9, is-4by3, etc.).
	Ratio string

	// Size defines the fixed image size
	// (is-16x16, is-32x32, is-64x64, etc.).
	Size string

	// Rounded applies the `is-rounded` modifier
	// to the <img> element.
	Rounded bool

	// Attr contains additional HTML attributes
	// for the <img> element.
	Attr templ.Attributes

	// FigureAttr contains additional HTML attributes
	// for the <figure> wrapper.
	FigureAttr templ.Attributes
}

Image — Bulma image component. Atomic level: ATOM

Image renders a Bulma `.image` wrapper with a nested `<img>` element. It supports fixed sizes, aspect ratios, and rounded images.

This component is layout-oriented and always renders a <figure> element as required by Bulma.

type Items 

type Items []templ.Component

Items defines a list of templ components used for explicit multi-child composition.

This type exists to avoid excessive templ.Join usage and to better match Bulma's structural patterns.

func (Items) Render 

func (i Items) Render() templ.Component

Render outputs all components contained in the Items list in declaration order.

Render MUST be called explicitly by container components that accept Items as their content model.

type NotificationProps 

type NotificationProps struct {
	// Color defines the Bulma color modifier
	// (is-primary, is-info, is-success, is-warning, is-danger).
	Color string

	// Attr contains additional HTML attributes
	// for the `.notification` container.
	Attr templ.Attributes
}

Notification — Bulma notification component. Atomic level: ATOM

Notification renders a Bulma `.notification` container. It does not manage close buttons, state, or behavior.

Any additional elements (such as a delete button) must be composed explicitly by the caller.

type ProgressProps 

type ProgressProps struct {
	// Color defines the Bulma color modifier
	// (is-primary, is-link, is-info, is-success, etc.).
	Color string

	// Size defines the Bulma size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the <progress> element.
	Attr templ.Attributes

	// Max is the maximum value of the progress bar (maps to the "max" attribute).
	// Use ProgressUnset (-1) to omit this attribute.
	Max int

	// Current is the current progress value (maps to the "value" attribute).
	// Use ProgressUnset (-1) to omit this attribute and show indeterminate progress.
	Current int
}

Progress — Bulma progress bar. Atomic level: ATOM

Progress defines a thin wrapper around the native <progress> element styled with Bulma classes.

This component does NOT compute or format progress values. Any content rendered inside <progress> is fully controlled by the caller, exactly as allowed by Bulma.

type SkeletonBlockProps 

type SkeletonBlockProps struct {
	// Attr contains additional HTML attributes
	// for the `.skeleton-block` element.
	Attr templ.Attributes
}

SkeletonBlock renders a Bulma `.skeleton-block`. Atomic level: ATOM

SkeletonBlock defines visual wrapper that applies a skeleton loading style to its content.

type SkeletonLinesProps 

type SkeletonLinesProps struct {
	// Attr contains additional HTML attributes
	// for the `.skeleton-lines` container.
	Attr templ.Attributes
}

SkeletonLines renders Bulma `.skeleton-lines`. Atomic level: ATOM

SkeletonLines defines wrapper used to apply skeleton loading styles to text-like content.

type SubtitleProps 

type SubtitleProps struct {
	// Size defines the visual size modifier
	// (is-1, is-2, is-3, is-4, is-5, is-6).
	Size string

	// Attr contains additional HTML attributes
	// for the wrapper element.
	Attr templ.Attributes
}

Subtitle — Bulma typographic subtitle. Atomic level: ATOM

Subtitle applies Bulma `.subtitle` styles and does NOT define HTML semantics.

Semantic HTML tags must be selected at the page or layout level.

type TableContainerProps 

type TableContainerProps struct {
	// Attr contains additional HTML attributes
	// for the `.table-container` element.
	Attr templ.Attributes
}

TableContainer renders a Bulma `.table-container`. Atomic level: ATOM

TableContainer is used to wrap tables to enable horizontal scrolling.

type TableProps 

type TableProps struct {
	// Modifiers contains Bulma table modifiers.
	// Example: "is-striped is-hoverable is-fullwidth"
	Modifiers string

	// Attr contains additional HTML attributes
	// for the <table> element.
	Attr templ.Attributes
}

Table renders a Bulma `.table` element. Atomic level: ATOM

Table defines structural and typographic element. It does not manage data, rows, or cells. All table markup is provided via content.

Supported modifiers: is-bordered, is-striped, is-narrow, is-hoverable, is-fullwidth

type TagProps 

type TagProps struct {
	// Color defines the tag color modifier
	// (is-primary, is-info, is-success, is-warning, is-danger).
	Color string

	// Size defines the tag size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Rounded applies the `is-rounded` modifier.
	Rounded bool

	// Attr contains additional HTML attributes
	// for the `.tag` element.
	Attr templ.Attributes
}

Tag — Bulma tag element. Atomic level: ATOM

Tag defines a content-based component that renders a Bulma `.tag` element. It does not manage delete buttons, icons, or links internally.

Any additional elements must be composed explicitly.

type TagsProps 

type TagsProps struct {
	// HasAddons applies the `has-addons` modifier.
	HasAddons bool

	// Attr contains additional HTML attributes
	// for the `.tags` container.
	Attr templ.Attributes
}

Tags — Bulma tags container. Atomic level: ORGANISM

Tags groups multiple Tag components together using the Bulma `.tags` wrapper.

type TitleProps 

type TitleProps struct {
	// Size defines the visual size modifier
	// (is-1, is-2, is-3, is-4, is-5, is-6).
	Size string

	// Spaced applies the `is-spaced` modifier.
	Spaced bool

	// Attr contains additional HTML attributes
	// for the wrapper element.
	Attr templ.Attributes
}

Title — Bulma typographic title. Atomic level: ATOM

Title defines a visual typographic component that applies the Bulma `.title` styles. It does NOT define HTML semantics or document structure.

The semantic HTML element must be chosen at the page or layout level.

type WrapProps 

type WrapProps struct {
	Tag     string
	Classes []string
	Attr    templ.Attributes
}

WrapProps defines parameters for Wrap.

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.