ui

package
v0.0.0-...-680f995 Latest Latest
Warning

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

 Go to latest Published: Dec 31, 2024 License: MIT Imports: 5 Imported by: 0

Documentation

Overview

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

Accordion renders an accordion component composed of a <details> containing a <summary> and other child content.

func Checkbox 

func Checkbox(props CheckboxProps) templ.Component

Checkbox will render a checkbox input.

Note: When the Valid field is used, some JavaScript is executed when the user interacts with the checkbox element. This JavaScript removes the applied validation styling. The Checkbox component itself does not require JavaScript. If a user has JavaScript disabled, the interactivity in the styling of the Checkbox will fail gracefully.

func DetectTheme 

func DetectTheme() templ.ComponentScript

DetectTheme when placed in the <head> of the html document will automatically detect the user theme preference and apply it

func FieldGroup 

func FieldGroup(orientation FieldGroupOrientation) templ.Component

FieldGroup renders a fieldset containing all children arranged in the given orientation

func Input 

func Input(props InputProps) templ.Component

Input will render an input of the specified type.

Note: While the Validator field requires JavaScript to function, the Input component itself does not require JavaScript. If a user has JavaScript disabled, the Validator field of the Input will fail gracefully.

func Radio 

func Radio(props RadioProps) templ.Component

Radio will render a radio input.

Note: When the Valid field is used, some JavaScript is executed when the user interacts with the radio element. This JavaScript removes the applied validation styling. The Radio component itself does not require JavaScript. If a user has JavaScript disabled, the interactivity in the styling of the Radio will fail gracefully.

func Range 

func Range(props RangeProps) templ.Component

Range will render a range input.

func Select 

func Select(props SelectProps) templ.Component

Select will render a select.

Note: When the Valid field is used, some JavaScript is executed when the user interacts with the select element. This JavaScript removes the applied validation styling and returns the validation message to the HelperText if given. The Select component itself does not require JavaScript. If a user has JavaScript disabled, the interactivity in the styling of the Select will fail gracefully.

func Switch 

func Switch(props SwitchProps) templ.Component

func Textarea 

func Textarea(props TextareaProps) templ.Component

Textarea will render a textarea.

Note: While the Validator field requires JavaScript to function, the Textarea component itself does not require JavaScript. If a user has JavaScript disabled, the Validator field of the Textarea will fail gracefully.

func ThemeToggle 

func ThemeToggle(props ThemeToggleProps) templ.Component

ThemeToggle will add an animated toggle switch that allows a user to manually toggle between light and dark mode. To get the best out of this, component, place the `@ui.DetectTheme()` script component in the <head> of your document.

Note: This component requires JavaScript to function.

Types

type AccordionProps 

type AccordionProps struct {
	Button           bool   // Styles the accordion as a button
	Class            string // Adds optional additional classes to the accordion
	ID               string // A unique ID to add to the accordion
	Name             string // Adds a name to the accordion
	Open             bool   // Defaults the accordion to be open if true
	Summary          string // The main clickable text of the accordion
	SummaryClass     string // Adds optional additionall classes to the accordion
	templ.Attributes        // Adds optional additional attributes to add to the accordion
}

type CheckboxProps 

type CheckboxProps struct {
	Checked          bool           // Checks the checkbox if true
	Class            string         // Adds optional additional classes to the checkbox
	Disabled         bool           // Disables the checkbox if true
	ID               string         // A unique ID to add to the checkbox
	Label            string         // Adds a label to the checkbox
	Name             string         // Adds the checkbox name
	Style            CheckboxStyle  // Applies optional shape styling to the checkbox, defaults to square
	Value            string         // Sets the checkbox value
	Valid            CheckboxStatus // Applies validation styling to the checkbox
	templ.Attributes                // Adds optional additional attributes to add to the checkbox
}

type CheckboxStatus 

type CheckboxStatus int
const (
	CheckboxInvalid CheckboxStatus = iota + 1
	CheckboxValid
)

type CheckboxStyle 

type CheckboxStyle string
const (
	SquaredCheckbox CheckboxStyle = ""
	RoundedCheckbox CheckboxStyle = "pg-rounded"
	PillCheckbox    CheckboxStyle = "pg-pill"
)

type FieldGroupOrientation 

type FieldGroupOrientation bool
const (
	FieldGroupVertical   FieldGroupOrientation = true
	FieldGroupHorizontal FieldGroupOrientation = false
)

type InputLabel 

type InputLabel string
const (
	LabelNone       InputLabel = ""
	LabelTop        InputLabel = "pg-label-top"
	LabelLeft       InputLabel = "pg-label-left"
	LabelResponsive InputLabel = "pg-label-responsive"
)

type InputProps 

type InputProps struct {
	Class            string         // Adds optional additional classes to the input field
	Disabled         bool           // Disables the input if true
	HelperText       string         // Adds optional helper text underneath the input field
	ID               string         // A unique ID to add to the input
	Label            string         // Adds a label to the input as an aria-label attribute
	LabelElement     InputLabel     // Adds an optional a label element if specified
	Name             string         // Adds the input name
	Placeholder      string         // Adds placeholder text to text based elements
	Required         bool           // Ensures the input is required if true
	Style            InputStyle     // Applies optional shape styling to the input, defaults to square
	Type             InputType      // Defines the type of input, defaults to text if not given
	Validator        InputValidator // Adds an optional validation callback function
	Value            string         // An optional value to default the input to
	templ.Attributes                // Adds optional additional attributes to add to the input
}

type InputStyle 

type InputStyle string
const (
	SquaredInput InputStyle = ""
	RoundedInput InputStyle = "pg-rounded"
	PillInput    InputStyle = "pg-pill"
)

type InputType 

type InputType string
const (
	Color         InputType = "color"
	Date          InputType = "date"
	DatetimeLocal InputType = "datetime-local"
	Email         InputType = "email"
	Month         InputType = "month"
	Number        InputType = "number"
	Password      InputType = "password"
	Tel           InputType = "tel"
	Text          InputType = "text"
	Time          InputType = "time"
	Url           InputType = "url"
	Week          InputType = "week"
)

type InputValidator 

type InputValidator struct {
	// The name of a JavaScript function with the signature `function(value: string): boolean`.
	//
	// E.g., if you defined a function named `validateDate`, pass "validateDate" as the value to Callback
	Callback       templ.JSExpression
	ErrorMessage   string // An optional error message to be shown when the input is not valid
	SuccessMessage string // An optional success message to be shown when the input is valid
}

InputValidator adds a validation callback function with optional error and success messages to an input

type RadioProps 

type RadioProps struct {
	Checked          bool        // Checks the radio if true
	Class            string      // Adds optional additional classes to the radio
	Disabled         bool        // Disables the radio if true
	ID               string      // A unique ID to add to the radio
	Label            string      // Adds a label to the radio
	Name             string      // Adds the radio name
	Style            RadioStyle  // Applies optional shape styling to the radio, defaults to pill
	Value            string      // Sets the radio value
	Valid            RadioStatus // Applies validation styling to the radio
	templ.Attributes             // Adds optional additional attributes to add to the radio
}

type RadioStatus 

type RadioStatus int
const (
	RadioInvalid RadioStatus = iota + 1
	RadioValid
)

type RadioStyle 

type RadioStyle string
const (
	SquaredRadio RadioStyle = "pg-squared"
	RoundedRadio RadioStyle = "pg-rounded"
	PillRadio    RadioStyle = "pg-pill"
)

type RangeProps 

type RangeProps struct {
	Class            string     // Adds optional additional classes to the range
	Disabled         bool       // Disables the range if true
	ID               string     // A unique ID to add to the range
	Label            string     // Adds a label to the range
	Max              string     // Adds the maximum range
	Min              string     // Adss the minimum range
	Name             string     // Adds the range name
	Step             string     // Adds the step size of the range
	Style            RangeStyle // Applies optional shape styling to the range, defaults to square
	Type             RangeType  // Changes the range styling to the given type, defaults to primary colors
	Value            string     // Sets the range value
	templ.Attributes            // Adds optional additional attributes to add to the range
}

type RangeStyle 

type RangeStyle string
const (
	SquaredRange RangeStyle = ""
	RoundedRange RangeStyle = "pg-rounded"
	PillRange    RangeStyle = "pg-pill"
)

type RangeType 

type RangeType string
const (
	PrimaryRange RangeType = ""
	DangerRange  RangeType = "pg-danger-range"
	SuccessRange RangeType = "pg-success-range"
	InfoRange    RangeType = "pg-info-range"
	WarningRange RangeType = "pg-warning-range"
)

type SelectProps 

type SelectProps struct {
	Class             string       // Adds optional additional classes to the select
	Disabled          bool         // Disables the select if true
	HelperText        string       // Adds optional helper text underneath the select
	ID                string       // A unique ID to add to the select
	Label             string       // Adds a label to the select as an aria-label attribute
	Multiple          bool         // Allows multiple options to be selected
	Name              string       // Adds the select name
	Placeholder       string       // Adds placeholder text to text based elements
	Required          bool         // Ensures the select is required if true
	Size              int          // Specifies how many items can be visible at once
	Style             SelectStyle  // Applies optional shape styling to the select, defaults to square
	Valid             SelectStatus // Applies validation styling to the select
	ValidationMessage string       // An optional message to accompany the validation status
	templ.Attributes               // Adds optional additional attributes to add to the select
}

type SelectStatus 

type SelectStatus int
const (
	SelectInvalid SelectStatus = iota + 1
	SelectValid
)

type SelectStyle 

type SelectStyle string
const (
	SquaredSelect SelectStyle = ""
	RoundedSelect SelectStyle = "pg-rounded"
	PillSelect    SelectStyle = "pg-pill"
)

type SwitchProps 

type SwitchProps struct {
	Class            string       // Adds optional additional classes to the switch
	Disabled         bool         // Disables the switch if true
	ID               string       // A unique ID to add to the switch
	Label            string       // Adds a label to the switch
	Name             string       // Adds the switch name
	Style            SwitchStyle  // Applies optional shape styling to the switch, defaults to square
	Toggled          bool         // Toggless the switch if true
	Type             SwitchType   // Changes the switch styling to the given type, defaults to primary colors
	Value            string       // Sets the switch value
	Valid            SwitchStatus // Applies validation styling to the switch
	templ.Attributes              // Adds optional additional attributes to add to the switch
}

type SwitchStatus 

type SwitchStatus int
const (
	SwitchInvalid SwitchStatus = iota + 1
	SwitchValid
)

type SwitchStyle 

type SwitchStyle string
const (
	SquaredSwitch SwitchStyle = ""
	RoundedSwitch SwitchStyle = "pg-rounded"
	PillSwitch    SwitchStyle = "pg-pill"
)

type SwitchType 

type SwitchType string
const (
	PrimarySwitch SwitchType = ""
	DangerSwitch  SwitchType = "pg-danger-switch"
	SuccessSwitch SwitchType = "pg-success-switch"
	InfoSwitch    SwitchType = "pg-info-switch"
	WarningSwitch SwitchType = "pg-warning-switch"
)

type TextareaProps 

type TextareaProps struct {
	Class            string         // Adds optional additional classes to the textarea
	Disabled         bool           // Disables the textarea if true
	HelperText       string         // Adds optional helper text underneath the textarea field
	ID               string         // A unique ID to add to the textarea
	Label            string         // Adds a label to the textarea as an aria-label attribute
	LabelElement     InputLabel     // Adds an optional a label element if specified
	Name             string         // Adds the textarea name
	Placeholder      string         // Adds placeholder text to the textarea
	Required         bool           // Ensures the textarea is required if true
	Rows             int            // An integer representing the height of the textarea
	Resize           TextareaResize // Applies optional resize styling to textarea, defaults to vertical
	Style            TextareaStyle  // Applies optional shape styling to the textarea, defaults to square
	Validator        InputValidator // Adds an optional validation callback function
	Value            string         // An optional value to default the textarea to
	templ.Attributes                // Adds optional additional attributes to add to the textarea
}

type TextareaResize 

type TextareaResize string
const (
	ResizeVertical   TextareaResize = ""
	ResizeAll        TextareaResize = "pg-resize-all"
	ResizeHorizontal TextareaResize = "pg-resize-horizontal"
	ResizeNone       TextareaResize = "pg-resize-none"
)

type TextareaStyle 

type TextareaStyle string
const (
	SquaredTextarea TextareaStyle = ""
	RoundedTextarea TextareaStyle = "pg-rounded"
)

type ThemeToggleIcon 

type ThemeToggleIcon int
const (
	ClassicToggle ThemeToggleIcon = iota
	InnerMoonToggle
	ExpandToggle
	WithinToggle
	AroundToggle
	DarkSideToggle
	HorizonToggle
	EclipseToggle
	LightbulbToggle
	DarkInnerToggle
	HalfSunToggle
	SimpleToggle
)

type ThemeToggleProps 

type ThemeToggleProps struct {
	// Optional: A theme toggle icon, names found at https://toggles.dev/
	//
	// If left blank, defaults to Classic icon
	Icon ThemeToggleIcon
	// Optional: A css size, e.g., 16px, 1em, 1rem, etc
	//
	// If left blank, defaults to 1em
	Size string
}

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.