components

package
v0.29.2 Latest Latest
Warning

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

 Go to latest Published: Jan 30, 2025 License: MIT Imports: 9 Imported by: 0

Documentation

Overview

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

templ: version: v0.3.819

Index

Constants

View Source 
const (
	ButtonVariantDefault     ButtonVariant = "default"
	ButtonVariantDestructive ButtonVariant = "destructive"
	ButtonVariantOutline     ButtonVariant = "outline"
	ButtonVariantSecondary   ButtonVariant = "secondary"
	ButtonVariantGhost       ButtonVariant = "ghost"
	ButtonVariantLink        ButtonVariant = "link"

	ButtonSizeMd   ButtonSize = "md"
	ButtonSizeSm   ButtonSize = "sm"
	ButtonSizeLg   ButtonSize = "lg"
	ButtonSizeIcon ButtonSize = "icon"
)

Variables

View Source 
var (
	// DateLocaleSpanish provides Spanish localization
	DateLocaleSpanish = DateLocale{
		MonthNames: []string{"Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
			"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"},
		DayNames: []string{"Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"},
	}

	// DateLocaleGerman provides German localization
	DateLocaleGerman = DateLocale{
		MonthNames: []string{"Januar", "Februar", "März", "April", "Mai", "Juni",
			"Juli", "August", "September", "Oktober", "November", "Dezember"},
		DayNames: []string{"Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"},
	}

	// DateLocaleFrench provides French localization
	DateLocaleFrench = DateLocale{
		MonthNames: []string{"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
			"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"},
		DayNames: []string{"Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"},
	}

	// DateLocaleItalian provides Italian localization
	DateLocaleItalian = DateLocale{
		MonthNames: []string{"Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
			"Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"},
		DayNames: []string{"Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"},
	}

	// DateLocaleJapanese provides Japanese localization
	DateLocaleJapanese = DateLocale{
		MonthNames: []string{"1月", "2月", "3月", "4月", "5月", "6月",
			"7月", "8月", "9月", "10月", "11月", "12月"},
		DayNames: []string{"日", "月", "火", "水", "木", "金", "土"},
	}
)

Pre-defined locales for different languages

View Source 
var (
	// DatePickerISO provides ISO format with default locale
	DatePickerISO = DatepickerConfig{
		Format: DateFormatISO,
		Locale: DateLocaleDefault,
	}

	// DatePickerEU provides European format with default locale
	DatePickerEU = DatepickerConfig{
		Format: DateFormatEU,
		Locale: DateLocaleDefault,
	}

	// DatePickerUK provides UK format with default locale
	DatePickerUK = DatepickerConfig{
		Format: DateFormatUK,
		Locale: DateLocaleDefault,
	}

	// DatePickerUS provides US format with default locale
	DatePickerUS = DatepickerConfig{
		Format: DateFormatUS,
		Locale: DateLocaleDefault,
	}

	// DatePickerUS provides US format with default locale
	DatePickerLONG = DatepickerConfig{
		Format: DateFormatLONG,
		Locale: DateLocaleDefault,
	}
)
View Source 
var DateLocaleDefault = DateLocale{
	MonthNames: []string{"January", "February", "March", "April", "May", "June",
		"July", "August", "September", "October", "November", "December"},
	DayNames: []string{"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"},
}

DateLocaleDefault and other locale presets

View Source 
var TemplFiles embed.FS

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

Accordion renders a collapsible content container

func AccordionScript added in v0.26.0 

func AccordionScript() templ.Component

func Alert 

func Alert(props AlertProps) templ.Component

Alert renders a status message component

func AlertDescription 

func AlertDescription() templ.Component

AlertDescription renders the body content

func AlertTitle 

func AlertTitle() templ.Component

AlertTitle renders the heading section

func Avatar 

func Avatar(props AvatarProps) templ.Component

Avatar renders a user avatar image or initials

func Badge 

func Badge(props BadgeProps) templ.Component

func Button 

func Button(props ButtonProps) templ.Component

Interactive element that triggers actions when clicked.

func Card 

func Card(props CardProps) templ.Component

Container for organizing related content and

func CardContent 

func CardContent() templ.Component

CardContent renders the main content area of a card.

func CardDescription 

func CardDescription() templ.Component

CardDescription renders the description of a card.

func CardFooter 

func CardFooter() templ.Component

CardFooter renders the footer section of a card.

func CardHeader 

func CardHeader() templ.Component

CardHeader renders the header section of a card.

func CardImage 

func CardImage(props CardImageProps) templ.Component

CardImage renders an image section within the card

func CardTitle 

func CardTitle() templ.Component

CardTitle renders the title of a card.

func Checkbox 

func Checkbox(props CheckboxProps) templ.Component

Checkbox renders a styled checkbox input with customizable icon

func Code added in v0.28.0 

func Code(p CodeProps) templ.Component

Code displays a code block with optional syntax highlighting and copy functionality

func CodeScript added in v0.28.0 

func CodeScript() templ.Component

func Datepicker 

func Datepicker(props DatepickerProps) templ.Component

Datepicker renders a date selection input with calendar popup

func DatepickerScript added in v0.26.0 

func DatepickerScript() templ.Component
func DropdownMenu(props DropdownMenuProps) templ.Component

Floating menu for displaying a list of actions or options. 

func DropdownScript() templ.Component

func FormDescription 

func FormDescription(props FormDescriptionProps) templ.Component

FormDescription renders helper text below form elements

func FormItem 

func FormItem(props FormItemProps) templ.Component

FormItem wraps form elements in a vertical layout

func FormItemFlex 

func FormItemFlex(props FormItemProps) templ.Component

FormItemFlex wraps form elements in a horizontal layout

func FormLabel 

func FormLabel(props FormLabelProps) templ.Component

FormLabel renders a form label

func FormMessage 

func FormMessage(props FormMessageProps) templ.Component

FormMessage renders feedback messages

func Input 

func Input(props InputProps) templ.Component

Input renders a styled form input field

func Label 

func Label(props LabelProps) templ.Component

Label renders a form label with error and disabled states

func LabelScript added in v0.26.0 

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

Dialog overlay that requires user attention or interaction.

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

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 ModalScript added in v0.26.0 

func ModalScript() templ.Component

func ModalTrigger 

func ModalTrigger(id string) templ.Component

ModalTrigger creates clickable elements that open a modal

func Radio 

func Radio(props RadioProps) templ.Component

Radio renders a styled radio input button

func Select 

func Select(props SelectProps) templ.Component

Select renders a styled dropdown selection input

func Sheet 

func Sheet(props SheetProps) templ.Component

Side-anchored panel that slides in from screen edges.

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 SheetScript added in v0.26.0 

func SheetScript() templ.Component

func SheetTrigger 

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

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

func Slider 

func Slider(props SliderProps) templ.Component

Control for selecting a numeric value within a range.

func SliderScript added in v0.26.0 

func SliderScript() templ.Component

func Tabs 

func Tabs(props TabsProps) templ.Component

func TabsScript added in v0.26.0 

func TabsScript() templ.Component

func Textarea 

func Textarea(props TextareaProps) templ.Component

Textarea renders a multi-line text input field

func TextareaScript added in v0.26.0 

func TextareaScript() templ.Component

func Timepicker added in v0.29.0 

func Timepicker(props TimepickerProps) templ.Component

A native time selector with support for 12/24 hour formats.

func TimepickerScript added in v0.29.0 

func TimepickerScript() templ.Component

func Toast 

func Toast(props ToastProps) templ.Component

func ToastScript added in v0.26.0 

func ToastScript() templ.Component

Flexible toast component for notifications and feedback.

func Toggle 

func Toggle(props ToggleProps) templ.Component

Toggle renders a styled switch input

func Tooltip added in v0.27.0 

func Tooltip(props TooltipProps) templ.Component

A small pop-up box that appears when a user hovers over an element

func TooltipScript added in v0.27.0 

func TooltipScript() templ.Component

Types

type AccordionItem 

type AccordionItem struct {
	ID      string          // Unique identifier for state management
	Trigger templ.Component // Header content that toggles section
	Content templ.Component // Expandable section content
}

type AccordionProps 

type AccordionProps struct {
	Items      []AccordionItem  // Array of accordion sections
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

AccordionProps configures the Accordion component

type AlertProps 

type AlertProps struct {
	Variant AlertVariant // Visual style variant
	Class   string       // Additional CSS classes
}

type AlertVariant 

type AlertVariant string
const (
	AlertVariantDefault     AlertVariant = "default"
	AlertVariantDestructive AlertVariant = "destructive"
)

type AvatarProps 

type AvatarProps struct {
	ImageSrc   string           // URL of avatar image
	Name       string           // Name for generating initials
	Size       AvatarSize       // Size variant
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type AvatarSize 

type AvatarSize string
const (
	AvatarSizeSmall  AvatarSize = "small"
	AvatarSizeMedium AvatarSize = "medium"
	AvatarSizeLarge  AvatarSize = "large"
)

type BadgeProps 

type BadgeProps struct {
	Class      string           // Additional CSS classes
	Text       string           // Badge text content
	Variant    BadgeVariant     // Visual style variant
	IconBefore templ.Component  // Icon to display before the text
	IconAfter  templ.Component  // Icon to display after the text
	Attributes templ.Attributes // Additional HTML attributes
}

type BadgeVariant 

type BadgeVariant string
const (
	BadgeVariantDefault     BadgeVariant = "default"
	BadgeVariantSecondary   BadgeVariant = "secondary"
	BadgeVariantDestructive BadgeVariant = "destructive"
	BadgeVariantOutline     BadgeVariant = "outline"
)

type ButtonProps 

type ButtonProps struct {
	Class      string           // Additional CSS classes
	Text       string           // Button label text
	Variant    ButtonVariant    // Visual style (default, destructive, outline, secondary, ghost, link)
	Size       ButtonSize       // Button dimensions (md, sm, lg, icon)
	FullWidth  bool             // Expand to fill container
	Href       string           // Optional URL for link buttons
	Target     string           // Link target attribute (default: _self)
	Disabled   bool             // Interactivity state
	Type       string           // Button type attribute
	IconLeft   templ.Component  // Icon component before text
	IconRight  templ.Component  // Icon component after text
	Attributes templ.Attributes // Additional HTML attributes
}

type ButtonSize 

type ButtonSize string

type ButtonVariant 

type ButtonVariant string

type CardImagePosition 

type CardImagePosition string
const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardImageProps 

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

type CardProps 

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type CheckboxProps 

type CheckboxProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Value      string           // Checkbox value
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Icon       templ.Component  // Custom check icon
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

CheckboxProps configures the Checkbox component

type CodeProps added in v0.28.0 

type CodeProps struct {
	Language       string   // Programming language for syntax highlighting
	ShowCopyButton bool     // Whether to show the copy button
	Size           CodeSize // Size of the code block
	Class          string   // Additional classes for the wrapper div
	CodeClass      string   // Additional classes for the code element
}

type CodeSize added in v0.28.0 

type CodeSize string

CodeSize represents the available sizes for the Code component 

const (
	CodeSizeDefault CodeSize = ""     // ~20 lines (default)
	CodeSizeSm      CodeSize = "sm"   // ~10 lines (for short examples)
	CodeSizeLg      CodeSize = "lg"   // ~40 lines (for long examples)
	CodeSizeFull    CodeSize = "full" // Full height (no max-height)
)

type DateFormat 

type DateFormat string

DateFormat defines date formatting options 

const (
	DateFormatISO  DateFormat = "iso"  // ISO format (YYYY-MM-DD)
	DateFormatEU   DateFormat = "eu"   // European format (DD.MM.YYYY)
	DateFormatUK   DateFormat = "uk"   // UK format (DD/MM/YYYY)
	DateFormatUS   DateFormat = "us"   // US format (MM/DD/YYYY)
	DateFormatLONG DateFormat = "long" // Long format (Month DD, YYYY)
)

type DateLocale 

type DateLocale struct {
	MonthNames []string // Localized month names
	DayNames   []string // Localized day names
}

DateLocale configures locale-specific settings

type DatepickerConfig 

type DatepickerConfig struct {
	Format DateFormat // Date format style
	Locale DateLocale // Localization settings
}

DatepickerConfig combines format and locale settings

func NewDatepickerConfig 

func NewDatepickerConfig(format DateFormat, locale DateLocale) DatepickerConfig

NewDatepickerConfig creates a new configuration with specified format and locale

type DatepickerProps 

type DatepickerProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       time.Time        // Selected date
	Config      DatepickerConfig // Format and locale config
	Placeholder string           // Helper text shown when empty
	Required    bool             // Marks input as mandatory
	Disabled    bool             // Prevents interaction
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

DatepickerProps configures the Datepicker component 

type DropdownMenuItem struct {
	Label      string             // Display text
	Value      string             // Optional value
	Href       string             // Optional link URL
	Target     string             // Optional link target
	IconLeft   templ.Component    // Optional icon on the left
	IconRight  templ.Component    // Optional icon on the right
	SubItems   []DropdownMenuItem // Nested submenu items
	Disabled   bool               // Disables the item
	Attributes templ.Attributes   // Additional HTML attributesß
}
type DropdownMenuProps struct {
	Items    []DropdownMenuItem // Menu items
	Trigger  templ.Component    // Custom trigger element
	Class    string             // Additional CSS classes
	Position string             // Preferred placement
}

type FormDescriptionProps 

type FormDescriptionProps struct {
	Class string // Additional CSS classes
}

FormDescriptionProps represents helper text properties

type FormItemProps 

type FormItemProps struct {
	ID    string // Optional container ID
	Class string // Additional CSS classes
}

type FormLabelProps 

type FormLabelProps struct {
	For           string // Target form element ID
	Text          string // Label text
	Class         string // Additional CSS classes
	DisabledClass string // Additional CSS classes when the form element is disabled
}

type FormMessageProps 

type FormMessageProps struct {
	Type    string // error, success, warning, info
	Message string // Message text
	Class   string // Additional CSS classes
}

FormMessageProps represents feedback message properties

type InputProps 

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type InputType 

type InputType string
const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type LabelProps 

type LabelProps struct {
	ID            string // Optional label ID
	For           string // Target input ID
	Text          string // Label text
	Error         string // Error message
	Class         string // Additional CSS classes
	DisabledClass string // Additional CSS classes when the input is disabled
}

type ModalProps 

type ModalProps struct {
	ID    string // Unique identifier for control
	Class string // Additional CSS classes
}

type RadioProps 

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type SelectOption 

type SelectOption struct {
	Label      string           // Display text
	Value      string           // Form value
	Selected   bool             // Default selection
	Attributes templ.Attributes // Additional HTML attributes
}

type SelectProps 

type SelectProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Placeholder string           // Helper text shown when empty
	Options     []SelectOption   // Available choices
	Disabled    bool             // Prevents interaction
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type SheetProps 

type SheetProps struct {
	Title       string    // Header text
	Description string    // Subheading text
	Side        SheetSide // Slide-in direction
}

type SheetSide 

type SheetSide string
const (
	SheetSideTop    SheetSide = "top"
	SheetSideRight  SheetSide = "right"
	SheetSideBottom SheetSide = "bottom"
	SheetSideLeft   SheetSide = "left"
)

type SliderProps 

type SliderProps struct {
	ID          string           // Unique identifier for the slider
	Name        string           // Input name attribute
	Min         int              // Minimum value
	Max         int              // Maximum value
	Step        int              // Value increment
	Value       int              // Initial value
	Label       string           // Optional label text
	ShowValue   bool             // Show current value
	ValueFormat string           // Optional format suffix
	Disabled    bool             // Disables the slider
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type Tab 

type Tab struct {
	ID      string
	Title   string
	Content templ.Component
}

type TabsProps 

type TabsProps struct {
	Tabs                  []Tab
	TabsContainerClass    string
	ContentContainerClass string
}

type TextareaProps 

type TextareaProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       string           // Initial content
	Placeholder string           // Helper text shown when empty
	Rows        int              // Visible lines of text
	Disabled    bool             // Prevents interaction
	AutoResize  bool             // Enables dynamic resizing
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type TimepickerProps added in v0.29.0 

type TimepickerProps struct {
	ID          string           // Unique identifier
	Name        string           // Form input name
	Value       time.Time        // Initial time value
	Use12Hours  bool             // Enable 12-hour format with AM/PM
	AMLabel     string           // AM label for 12-hour format
	PMLabel     string           // PM label for 12-hour format
	Placeholder string           // Input placeholder text
	Required    bool             // Required form field
	Disabled    bool             // Disable interactivity
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type ToastProps 

type ToastProps struct {
	Message     string // Message to display
	Type        string // Type of the toast
	Position    string // Position of the toast
	Duration    int    // Duration in milliseconds
	Dismissible bool   // Show dismiss button
	Size        string // Size of the toast
	Icon        bool   // Show icon
}

type ToggleProps 

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type TooltipProps added in v0.27.0 

type TooltipProps struct {
	Trigger    templ.Component  // The element that triggers the tooltip
	Content    templ.Component  // The tooltip content
	Side       TooltipSide      // Tooltip position relative to trigger
	ShowArrow  bool             // Whether to show the arrow pointer
	OpenDelay  int              // Delay before showing tooltip (ms)
	CloseDelay int              // Delay before hiding tooltip (ms)
	Variant    TooltipVariant   // Visual style variant
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

TooltipProps configures the Tooltip component

type TooltipSide added in v0.27.0 

type TooltipSide string
const (
	TooltipTop    TooltipSide = "top"
	TooltipRight  TooltipSide = "right"
	TooltipBottom TooltipSide = "bottom"
	TooltipLeft   TooltipSide = "left"
)

type TooltipVariant added in v0.27.0 

type TooltipVariant string
const (
	TooltipDefault     TooltipVariant = "default"
	TooltipSecondary   TooltipVariant = "secondary"
	TooltipDestructive TooltipVariant = "destructive"
)

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.