components

package
v0.22.1 Latest Latest
Warning

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

 Go to latest Published: Nov 25, 2024 License: MIT Imports: 10 Imported by: 0

Documentation

Overview

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

templ: version: v0.2.778

Index

Constants

View Source 
const (
	// Button style variants
	Default     ButtonVariant = "default"     // Primary action button
	Destructive ButtonVariant = "destructive" // Dangerous/warning action
	Outline     ButtonVariant = "outline"     // Bordered button
	Secondary   ButtonVariant = "secondary"   // Less prominent action
	Ghost       ButtonVariant = "ghost"       // Minimal styling
	Link        ButtonVariant = "link"        // Appears as a text link

	// Button sizes
	Md         ButtonSize = "md"   // Standard size
	Sm         ButtonSize = "sm"   // Compact size
	Lg         ButtonSize = "lg"   // Large size
	ButtonIcon ButtonSize = "icon" // Square icon button
)

Variables

View Source 
var SidebarRightLinks = []SidebarRightLItem{
	{
		ImageSrc: "https://templ.guide/img/logo.svg",
		Url:      "https://templ.guide",
		Text:     "Elevate your Go projects with type-safe, efficient HTML templating.",
	},
	{
		ImageSrc: "https://alpinejs.dev/alpine_long.svg",
		Url:      "https://alpinejs.dev",
		Text:     "Simplify your JavaScript with a lightweight, powerful framework.",
	},
	{
		ImageSrc: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.944c5d0ef628083bb316f9b3d643385c86bcdb3d.svg",
		Url:      "https://tailwindcss.com",
		Text:     "Create beautiful, responsive designs with ease.",
	},
}
View Source 
var TemplFiles embed.FS

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

Accordion renders a collapsible content section component with expand/collapse functionality. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/accordion

Props: - Items: Array of accordion sections with ID, trigger and content - Class: Additional CSS classes - Attributes: Additional HTML attributes (e.g. data-testid)

func Alert 

func Alert(props AlertProps) templ.Component

Alert renders a notification box component for messages, warnings and errors. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/alert

Props: - Variant: Visual style (DefaultAlert or DestructiveAlert) - Class: Additional CSS classes

func AlertDescription 

func AlertDescription() templ.Component

AlertDescription renders the description of the alert.

func AlertTitle 

func AlertTitle() templ.Component

AlertTitle renders the title of the alert.

func Avatar 

func Avatar(props AvatarProps) templ.Component

Avatar renders a circular image or initials for user representation. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/avatar

Props: - ImageSrc: URL for the avatar image - Name: Text to generate initials from when no image is provided - Size: Avatar dimensions (small, medium, large) - Class: Additional CSS classes - Attributes: Additional HTML attributes

func AvatarInitials 

func AvatarInitials(name string) string

AvatarInitials generates a 1-2 character initial from the given name

func AvatarSizeClasses 

func AvatarSizeClasses(size AvatarSize) string

AvatarSizeClasses maps sizes to their corresponding CSS classes

func Button 

func Button(props ButtonProps) templ.Component

Button renders an interactive button or link component with consistent styling. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/button

Props: - Class: Additional CSS classes - Text: Button label text - Variant: Visual style (default, destructive, outline, etc) - Size: Button dimensions (sm, md, lg, icon) - FullWidth: Expand to fill container - Href: Optional URL for link buttons - Target: Link target attribute - Disabled: Interactivity state - Type: Button type attribute - Attributes: Additional HTML attributes - IconLeft: Icon component before text - IconRight: Icon component after text

func Card 

func Card(props CardProps) templ.Component

Card renders a container component with consistent styling and structure. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/card

Props: - Class: Additional CSS classes - Attributes: Additional HTML attributes

func CardContent 

func CardContent() templ.Component

CardContent renders the main card body section Contains the primary content area

func CardDescription 

func CardDescription() templ.Component

CardDescription renders secondary text below the title Uses muted styling for visual hierarchy

func CardFooter 

func CardFooter() templ.Component

CardFooter renders the bottom section of the card Typically contains actions or summary information

func CardHeader 

func CardHeader() templ.Component

CardHeader renders the top section of the card Typically contains title and description

func CardTitle 

func CardTitle() templ.Component

CardTitle renders the card's main heading Uses h3 with consistent styling

func Checkbox added in v0.20.4 

func Checkbox(props CheckboxProps) templ.Component

Checkbox renders a styled checkbox input with optional label. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/checkbox

Props: - ID: Unique identifier for the input - Name: Form field name - Value: Checkbox value - Label: Optional text label - Class: Additional CSS classes - Attributes: Additional HTML attributes

func DarkIcon 

func DarkIcon() templ.Component

func Datepicker 

func Datepicker(props DatepickerProps) templ.Component

Datepicker renders a calendar input component with popup date selection. Uses Alpine.js for interactions and supports dark mode via Tailwind. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/datepicker

Props: - ID: Unique identifier for the input - Name: Form field name - Placeholder: Helper text when empty - Format: Date display format - Class: Additional CSS classes - Attributes: Additional HTML attributes 

func DropdownMenu(props DropdownMenuProps) templ.Component

DropdownMenu renders a customizable popup menu with positioning and nesting support. Uses Alpine.js for interactions and supports keyboard navigation. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/dropdown-menu

Props: - Items: Menu structure and content - Trigger: Custom trigger element (optional) - Class: Additional CSS classes - Position: Preferred placement

Features: - Nested submenus (up to 3 levels) - Automatic position adjustment - Keyboard navigation - ARIA support

func DynamicThemeIcon added in v0.20.3 

func DynamicThemeIcon() templ.Component
func Footer() templ.Component

func Input 

func Input(props InputProps) templ.Component

Input renders a form input field with optional label and validation. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/input

Props: - Type: Input field behavior type - Placeholder: Helper text when empty - Value: Current input value - Name: Form field name - ID: Unique identifier - Label: Text label - Description: Helper text - Error: Validation message - Class: Additional CSS classes - FileAccept: Allowed file types - Attributes: Additional HTML attributes

func LightIcon 

func LightIcon() templ.Component
func Modal(props ModalProps) templ.Component

Modal renders a popup dialog window with customizable content. Uses Alpine.js for interactions and animations. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/modal

Props: - ID: Unique identifier for control - Class: Additional CSS classes

func ModalBody 

func ModalBody() templ.Component

/ ModalBody renders the main modal content area

func ModalClose 

func ModalClose(id string) templ.Component

ModalClose creates clickable elements that close a modal ID parameter must match the target modal's ID

func ModalFooter 

func ModalFooter() templ.Component

ModalFooter renders the modal action buttons section

func ModalHeader 

func ModalHeader() templ.Component

ModalHeader renders the modal title section

func ModalTrigger 

func ModalTrigger(id string) templ.Component

ModalTrigger creates clickable elements that open a modal ID parameter must match the target modal's ID 

func Navbar() templ.Component
func NavbarMobileMenu() templ.Component

func RadioGroup added in v0.20.8 

func RadioGroup(props RadioGroupProps) templ.Component

RadioGroup renders a set of mutually exclusive radio button options. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/radio-group

Props: - Name: Groups related radio buttons - Class: Additional CSS classes - Attributes: Additional HTML attributes

func RadioGroupItem added in v0.20.8 

func RadioGroupItem(props RadioGroupItemProps) templ.Component

RadioGroupItem renders an individual radio button with label. Must be used within a RadioGroup component.

Props: - Value: Radio button value - Name: Matches parent group name - ID: Unique identifier - Label: Button label - Class: Additional CSS classes - Attributes: Additional HTML attributes

func Select added in v0.22.0 

func Select(props SelectProps) templ.Component

Select renders a dropdown menu component with keyboard navigation. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/select

Props: - ID: Unique identifier - Name: Form field name - Placeholder: Default text - Options: Available choices - Class: Additional CSS classes - Attributes: Additional HTML attributes

Features: - Keyboard navigation - Disabled state support - Alpine.js integration - Custom styling via Tailwind

func Sheet 

func Sheet(props SheetProps) templ.Component

Sheet renders a slide-in panel with backdrop. Uses Alpine.js for animations and state management. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/sheet

Props: - Title: Header text - Description: Subheading text - Side: Slide-in direction

Features: - Responsive sizing - Animated transitions - Backdrop blur - ESC key closing

func SheetClose 

func SheetClose(text string) templ.Component

SheetClose creates a button that closes the sheet Must be used within Sheet

func SheetRoot 

func SheetRoot() templ.Component

SheetRoot initializes Alpine.js state and event handlers Must wrap Sheet components and triggers

func SheetTrigger 

func SheetTrigger(text string, side SheetSide) templ.Component

SheetTrigger creates elements that open the sheet Must be used within SheetRoot 

func Sidebar() templ.Component

func SidebarRight 

func SidebarRight() templ.Component

func Slider added in v0.22.0 

func Slider(props SliderProps) templ.Component

Slider renders a range input component with support for labels, value display and external binding. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/slider

Props:

  • ID: Unique identifier for the slider
  • Name: Input name attribute
  • Min: Minimum value (default: 0)
  • Max: Maximum value (default: 100)
  • Step: Value increment (default: 1)
  • Value: Initial value
  • Label: Optional label text
  • ShowValue: Show current value
  • ValueFormat: Optional format suffix (e.g. "%", "°C")
  • Class: Additional CSS classes
  • Disabled: Disables the slider
  • Attributes: Additional HTML attributes (e.g. x-model for binding)

func Tabs 

func Tabs(props TabsProps) templ.Component

Tabs renders a tabbed interface with animated transitions. Uses Alpine.js for state management and interactions. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/tabs

Props: - Tabs: Tab definitions and content - TabsContainerClass: Additional classes for header - ContentContainerClass: Additional classes for content

Features: - Animated tab switching - Keyboard navigation - Responsive layout - ARIA support

func Textarea added in v0.22.0 

func Textarea(props TextareaProps) templ.Component

Textarea renders a multi-line text input with optional validation. Uses Alpine.js for autoresize functionality when enabled. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/textarea

Props: - ID: Unique identifier - Name: Form field name - Value: Initial content - Placeholder: Helper text when empty - Label: Text label - Description: Helper text - Error: Validation message - Rows: Initial height in lines - Class: Additional CSS classes - AutoResize: Enable dynamic sizing - Attributes: Additional HTML attributes

func ThemeSwitcher 

func ThemeSwitcher() templ.Component

func Toggle added in v0.21.0 

func Toggle(props ToggleProps) templ.Component

Toggle renders a switch control for boolean values. Uses Alpine.js for state management and animations. For detailed examples and usage guides, visit https://goilerplate.com/docs/components/toggle

Props: - ID: Unique identifier - Name: Form field name - LabelLeft: Text before toggle - LabelRight: Text after toggle - Class: Additional CSS classes - Attributes: Additional HTML attributes

Features: - Animated switching - Keyboard navigation - Label placement options - ARIA support

Types

type AccordionItem 

type AccordionItem struct {
	// ID is the unique identifier for managing accordion item state
	ID string

	// Trigger is the content shown in the header/trigger area
	// Can be any templ.Component (typically text)
	Trigger templ.Component

	// Content is the expandable content section
	// Can be any templ.Component
	Content templ.Component
}

type AccordionProps 

type AccordionProps struct {
	// Items contains the accordion sections
	Items []AccordionItem

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type AlertProps 

type AlertProps struct {
	// Variant controls the alert styling (default or destructive)
	Variant AlertVariant

	// Class adds custom CSS classes
	Class string
}

type AlertVariant 

type AlertVariant string

AlertVariant defines the available alert styles 

const (
	// DefaultAlert shows standard informational styling
	DefaultAlert AlertVariant = "default"

	// DestructiveAlert shows error/warning styling
	DestructiveAlert AlertVariant = "destructive"
)

type AvatarProps 

type AvatarProps struct {
	// ImageSrc is the URL for the avatar image
	// If empty, initials will be shown instead
	ImageSrc string

	// Name is used to generate initials when no image is provided
	Name string

	// Size controls the avatar dimensions (small, medium, large)
	Size AvatarSize

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes
	Attributes templ.Attributes
}

type AvatarSize 

type AvatarSize string

AvatarSize defines the available avatar dimensions 

const (
	// AvatarSizeSmall renders a small avatar (32x32px)
	AvatarSizeSmall AvatarSize = "small"

	// AvatarSizeMedium renders a medium avatar (48x48px)
	AvatarSizeMedium AvatarSize = "medium"

	// AvatarSizeLarge renders a large avatar (64x64px)
	AvatarSizeLarge AvatarSize = "large"
)

type ButtonProps 

type ButtonProps struct {
	// Class adds custom CSS classes
	Class string

	// Text contains the button label
	Text string

	// Variant controls the button styling
	Variant ButtonVariant

	// Size controls button dimensions
	Size ButtonSize

	// FullWidth makes button expand to container width
	FullWidth bool

	// Href turns the button into a link
	Href string

	// Target controls link opening behavior
	Target string

	// Disabled controls interactive state (bool or JS expression)
	Disabled any

	// Type sets the button type attribute
	Type string

	// Attributes for additional HTML attributes
	Attributes templ.Attributes

	// IconLeft displays an icon before text
	IconLeft templ.Component

	// IconRight displays an icon after text
	IconRight templ.Component
}

type ButtonSize 

type ButtonSize string

ButtonSize defines the available button dimensions

type ButtonVariant 

type ButtonVariant string

ButtonVariant defines the available button styles

type CardProps 

type CardProps struct {
	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes
	Attributes templ.Attributes
}

type CheckboxProps added in v0.20.4 

type CheckboxProps struct {
	// ID uniquely identifies the checkbox input
	ID string

	// Name sets the form field name
	Name string

	// Value sets the checkbox value
	Value string

	// Label displays text next to checkbox
	// Empty string hides the label
	Label string

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type DatepickerProps 

type DatepickerProps struct {
	// ID uniquely identifies the datepicker input
	ID string

	// Name sets the form field name
	Name string

	// Placeholder shows helper text when empty
	Placeholder string

	// Format controls date string presentation
	// Supported formats:
	// - "M d, Y" (Jan 1, 2024)
	// - "MM-DD-YYYY" (01-01-2024)
	// - "DD-MM-YYYY" (01-01-2024)
	// - "YYYY-MM-DD" (2024-01-01)
	// - "D d M, Y" (Mon 1 Jan, 2024)
	Format string

	// Class adds custom CSS classes
	Class string

	Value string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}
type DropdownMenuItem struct {
	// Label displays text for the menu item
	Label string

	// Value for non-link menu items
	Value string

	// Href makes item a navigation link
	Href string

	// Target controls link opening behavior
	Target string

	// IconLeft displays icon before label
	IconLeft templ.Component

	// IconRight displays icon after label
	IconRight templ.Component

	// SubItems creates nested submenu
	SubItems []DropdownMenuItem

	// Disabled controls interactive state
	Disabled bool

	// Attributes for additional HTML attributes
	Attributes templ.Attributes
}
func (d DropdownMenuItem) ModifierClasses() string

ModifierClasses generates state-based CSS classes 

type DropdownMenuProps struct {
	// Items defines the menu structure
	Items []DropdownMenuItem

	// Trigger overrides default button trigger
	Trigger templ.Component

	// Class adds custom CSS classes
	Class string

	// Position sets preferred menu placement (left, right, top, bottom)
	Position string
}

type InputProps 

type InputProps struct {
	// Type sets the input field behavior
	Type InputType

	// Placeholder shows helper text when empty
	Placeholder string

	// Value sets the current input content
	Value string

	// Name sets the form field name
	Name string

	// ID uniquely identifies the input
	ID string

	// Label displays text above input
	Label string

	// Description shows helper text below input
	Description string

	// Error displays validation message
	Error string

	// Class adds custom CSS classes
	Class string

	// FileAccept limits allowed file types
	// Only used when Type is InputTypeFile
	FileAccept string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type InputType 

type InputType string

InputType defines the available input field types 

const (
	// Standard text inputs
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"

	// Date and time inputs
	InputTypeDate InputType = "date"
	InputTypeTime InputType = "time"

	// File upload input
	InputTypeFile InputType = "file"
)

type ModalProps 

type ModalProps struct {
	// ID uniquely identifies the modal for open/close control
	ID string

	// Class adds custom CSS classes
	Class string
}

type RadioGroupItemProps added in v0.20.8 

type RadioGroupItemProps struct {
	// Value sets the radio button value
	Value string

	// Name matches parent RadioGroup name
	Name string

	// ID uniquely identifies the radio button
	ID string

	// Label displays text next to radio button
	Label templ.Component

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type RadioGroupProps added in v0.20.8 

type RadioGroupProps struct {
	// Name groups related radio buttons
	Name string

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes
	Attributes templ.Attributes
}

type SelectOption added in v0.22.0 

type SelectOption struct {
	// Label displays text in dropdown
	Label string

	// Value sets the option's form value
	Value string

	// Attributes for disabled state or other HTML attributes
	Attributes templ.Attributes
}

type SelectProps added in v0.22.0 

type SelectProps struct {
	// ID uniquely identifies the select input
	ID string

	// Name sets the form field name
	Name string

	// Placeholder shows text when no option selected
	Placeholder string

	// Options defines available choices
	Options []SelectOption

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type SheetProps 

type SheetProps struct {
	// Title displays in sheet header
	Title string

	// Description shows below title
	Description string

	// Side controls slide-in direction
	Side SheetSide
}

type SheetSide 

type SheetSide string

SheetSide defines the slide-in direction 

const (
	// Sheet appearance directions
	Top    SheetSide = "top"    // Slides down from top
	Right  SheetSide = "right"  // Slides in from right
	Bottom SheetSide = "bottom" // Slides up from bottom
	Left   SheetSide = "left"   // Slides in from left
)

type SidebarRightLItem 

type SidebarRightLItem struct {
	ImageSrc string
	Url      string
	Text     string
}

type SliderProps added in v0.22.0 

type SliderProps struct {
	// ID is the unique identifier for the slider
	ID string

	// Name is the name attribute for the slider
	Name string

	// Min sets the minimum value (default: 0)
	Min int

	// Max sets the maximum value (default: 100)
	Max int

	// Step defines the increment between values (default: 1)
	Step int

	// Value sets the initial value
	Value int

	// Label displays a label above the slider
	Label string

	// ShowValue toggles the value display
	ShowValue bool

	// ValueFormat adds a suffix to the value (e.g. "%", "°C")
	ValueFormat string

	// Class adds custom CSS classes
	Class string

	// Disabled makes the slider non-interactive
	Disabled bool

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type Tab 

type Tab struct {
	// ID uniquely identifies the tab
	ID string

	// Title displays in tab button
	Title string

	// Content renders when tab is active
	Content templ.Component
}

type TabsProps 

type TabsProps struct {
	// Tabs defines the tabs structure and content
	Tabs []Tab

	// TabsContainerClass adds classes to tabs header
	TabsContainerClass string

	// ContentContainerClass adds classes to content area
	ContentContainerClass string
}

type TextareaProps added in v0.22.0 

type TextareaProps struct {
	// ID uniquely identifies the textarea
	ID string

	// Name sets the form field name
	Name string

	// Value sets initial content
	Value string

	// Placeholder shows when empty
	Placeholder string

	// Label displays text above textarea
	Label string

	// Description shows helper text below
	Description string

	// Error displays validation message
	Error string

	// Rows sets visible text lines height
	Rows int

	// Class adds custom CSS classes
	Class string

	// AutoResize enables dynamic height adjustment
	AutoResize bool

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type ToggleLabelPlacement added in v0.21.0 

type ToggleLabelPlacement string

ToggleLabelPlacement defines label position options

type ToggleProps added in v0.21.0 

type ToggleProps struct {
	// ID uniquely identifies the toggle
	ID string

	// Name sets the form field name
	Name string

	// LabelLeft displays text before toggle
	LabelLeft string

	// LabelRight displays text after toggle
	LabelRight string

	// Class adds custom CSS classes
	Class string

	// Attributes for additional HTML attributes and Alpine.js bindings
	Attributes templ.Attributes
}

type ToggleSize added in v0.21.0 

type ToggleSize string

/ ToggleSize defines the available toggle dimensions

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.