components

package
v0.21.1 Latest Latest
Warning

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

 Go to latest Published: Oct 26, 2024 License: MIT Imports: 9 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

Index

Constants

View Source 
const (
	Default     ButtonVariant = "default"
	Destructive ButtonVariant = "destructive"
	Outline     ButtonVariant = "outline"
	Secondary   ButtonVariant = "secondary"
	Ghost       ButtonVariant = "ghost"
	Link        ButtonVariant = "link"

	Md         ButtonSize = "md"
	Sm         ButtonSize = "sm"
	Lg         ButtonSize = "lg"
	ButtonIcon ButtonSize = "icon"
)

Constants for button variants and sizes.

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 an accordion component based on the provided props. It uses Alpine.js for interactivity and state management.

Usage: 

@components.Accordion(components.AccordionProps{
  Items: []components.AccordionItem{
    {
      ID: "item-1",
      Trigger: templ.Raw("Is it accessible?"),
      Content: templ.Raw("Yes. It adheres to the WAI-ARIA design pattern."),
    },
    {
      ID: "item-2",
      Trigger: templ.Raw("Is it styled?"),
      Content: templ.Raw("Yes. It comes with default styles that match the other components' aesthetic."),
    },
  },
  Class: "w-full sm:max-w-[70%]",
  Attributes: templ.Attributes{"data-testid": "my-accordion"},
})

Props:

  • Items: A slice of AccordionItem structs, each representing an item in the accordion.
  • Class: Additional CSS classes to apply to the accordion container. Default: "" (empty string)
  • Attributes: Additional HTML attributes to apply to the accordion container element. Default: nil

func Alert 

func Alert(props AlertProps) templ.Component

Alert renders an alert component based on the provided props and children. It can be customized with two visual styles: Default and Destructive. All content, including icons, should be passed in as children.

Usage: 

@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
  @components.ExclamationTriangleIcon()
  @components.AlertTitle{"Error"}
  @components.AlertDescription{"Your session has expired. Please log in again."}
}

Props:

  • Variant: The visual style of the alert (DefaultAlert or DestructiveAlert). Default: DefaultAlert
  • Class: Additional CSS classes to apply to the alert. Default: "" (empty string)

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 an avatar component based on the provided props. It displays an image if ImageSrc is provided, otherwise it shows initials.

Usage: 

@components.Avatar(components.AvatarProps{
  ImageSrc: "https://example.com/avatar.jpg",
  Name: "John Doe",
  Size: components.AvatarSizeMedium,
  Class: "border-2 border-blue-500",
})

Props:

  • ImageSrc: The URL of the avatar image. Default: "" (empty string)
  • Name: The name used to generate initials if ImageSrc is empty. Default: "" (empty string)
  • Size: The size of the avatar (AvatarSizeSmall, AvatarSizeMedium, AvatarSizeLarge). Default: AvatarSizeMedium
  • Class: Additional CSS classes to apply to the avatar. Default: "" (empty string)
  • Attributes: Additional HTML attributes to apply to the avatar element. Default: nil

func AvatarInitials 

func AvatarInitials(name string) string

getInitials generates initials from the given name.

func AvatarSizeClasses 

func AvatarSizeClasses(size AvatarSize) string

getSizeClasses returns the CSS classes for the given avatar size.

func Button 

func Button(props ButtonProps) templ.Component

Button renders a button or anchor component based on the provided props. It can be customized with various visual styles, sizes, and behaviors.

Usage: 

@components.Button(components.ButtonProps{
  Text: "Click me",
  Variant: components.Primary,
  Size: components.Md,
  FullWidth: false,
  IconLeft: components.Icon(components.IconProps{Name: "user"}),
  IconRight: components.Icon(components.IconProps{Name: "arrow-right"}),
  Attributes: templ.Attributes{
    "aria-label": "Click this button",
    "data-testid": "main-button",
  },
})

Props:

  • Class: Additional CSS classes to apply to the button. Default: "" (empty string)
  • Text: The text content of the button. Default: "" (empty string)
  • Variant: The visual style of the button (e.g., Default, Destructive, Outline). Default: Default
  • Size: The size of the button (Md, Sm, Lg, Icon). Default: Md
  • FullWidth: Whether the button should take up the full width of its container. Default: false
  • Href: If provided, renders the button as an anchor tag with this URL. Default: "" (empty string)
  • Target: The target attribute for the anchor tag (only used when Href is provided). Default: "" (empty string)
  • Disabled: Can be either a bool or a string. If bool (Go), it directly controls the disabled state. If string, it's treated as a JavaScript expression for dynamic disabling. Default: nil
  • Type: The type of the button. Default: "button"
  • Attributes: Additional HTML attributes to apply to the button or anchor element. Default: nil
  • IconLeft: An icon component to be displayed on the left side of the button text. Default: nil
  • IconRight: An icon component to be displayed on the right side of the button text. Default: nil

func Card 

func Card(props CardProps) templ.Component

Card renders a card component based on the provided props. It can be customized with additional classes and attributes.

Usage: 

@components.Card(components.CardProps{
  Class: "custom-card",
  Attributes: templ.Attributes{"data-testid": "my-card"},
}) {
  // Card content goes here
}

Props:

  • Class: Additional CSS classes to apply to the card. Default: "" (empty string)
  • Attributes: Additional HTML attributes to apply to the card element. Default: nil

func CardContent 

func CardContent() templ.Component

CardContent renders the main content section of a card.

Usage: 

@components.CardContent() {
  // Main card content goes here
}

func CardDescription 

func CardDescription() templ.Component

CardDescription renders the description of a card.

Usage: 

@components.CardDescription() {
  This is a detailed description of the card's content.
}

func CardFooter 

func CardFooter() templ.Component

CardFooter renders the footer section of a card.

Usage: 

@components.CardFooter() {
  @components.Button(components.ButtonProps{Text: "Submit"})
}

func CardHeader 

func CardHeader() templ.Component

CardHeader renders the header section of a card.

Usage: 

@components.CardHeader() {
  @components.CardTitle() { Card Title }
  @components.CardDescription() { Card description goes here }
}

func CardTitle 

func CardTitle() templ.Component

CardTitle renders the title of a card.

Usage: 

@components.CardTitle() {
  My Card Title
}

func Checkbox added in v0.20.4 

func Checkbox(props CheckboxProps) templ.Component

Checkbox renders a customizable checkbox component with an associated label.

Usage: 

@components.Checkbox(components.CheckboxProps{
  ID:      "terms",
  Name:    "accept_terms",
  Value:   "accepted",
  Label:   "I accept the terms and conditions",
  Checked: "true",
  Disabled: "isSubmitting",
  Class:   "mt-4",
  Attributes: templ.Attributes{"data-testid": "terms-checkbox"},
})

Props:

  • ID: The unique identifier for the checkbox input. Required.
  • Name: The name attribute for the checkbox input. Required.
  • Value: The value attribute for the checkbox input. Required.
  • Label: The text label associated with the checkbox. Optional.
  • Checked: Determines the checked state. Can be a bool or a string for dynamic binding. Optional.
  • Disabled: Determines the disabled state. Can be a bool or a string for dynamic binding. Optional.
  • Class: Additional CSS classes to apply to the checkbox container. Optional.
  • Attributes: Additional HTML attributes to apply to the checkbox input element. Optional.

func DarkIcon 

func DarkIcon() templ.Component

func Datepicker 

func Datepicker(props DatepickerProps) templ.Component

Datepicker renders an enhanced datepicker component with an input field and a calendar view. It uses Alpine.js for interactivity and provides various formatting options and improved navigation. This version supports dark mode using Tailwind CSS variables.

Usage: 

@components.Datepicker(components.DatepickerProps{
  ID:          "my-datepicker",
  Name:        "selected-date",
  Placeholder: "Select a date",
  Format:      "YYYY-MM-DD",
  Class:       "w-full",
})

Props:

  • ID: The unique identifier for the datepicker input. Default: "" (empty string)
  • Name: The name attribute for the datepicker input. Default: "" (empty string)
  • Placeholder: The placeholder text for the datepicker input. Default: "" (empty string)
  • Format: The date format to use. Default: "M d, Y"
  • Class: Additional CSS classes to apply to the datepicker container. Default: "" (empty string)
  • Attributes: Additional HTML attributes to apply to the datepicker input element. Default: nil
func DropdownMenu(props DropdownMenuProps) templ.Component

DropdownMenu renders an enhanced dropdown menu component It can be customized with various styles, positions, and behaviors.

Usage: 

@components.DropdownMenu(components.DropdownMenuProps{
  Trigger: components.Button(components.ButtonProps{
    Text: "Open Menu",
    IconRight: components.Icon(components.IconProps{Name: "chevron-down"}),
  }),
  Position: "bottom",
  Items: []components.DropdownMenuItem{
    {Label: "Option 1", Value: "opt1"},
    {Label: "Option 2", Value: "opt2", IconLeft: components.Icon(components.IconProps{Name: "settings"})},
    {Label: "Submenu", SubItems: []components.DropdownMenuItem{
      {Label: "Sub Option 1", Value: "sub1"},
      {Label: "Sub Option 2", Value: "sub2"},
    }},
  },
})

Props:

  • Items: Slice of DropdownMenuItem, defining the content of the dropdown
  • Trigger: Custom component to trigger the dropdown (optional, default is a basic button)
  • Class: Additional CSS classes to apply to the root element
  • Position: Preferred position of the dropdown ("left", "right", "top", or "bottom")
  • Attributes: Additional HTML attributes to apply to the accordion container element. Default: nil

Features:

  • Supports nested submenus up to 3 levels deep
  • Automatically adjusts position based on available space
  • Supports custom icons for menu items
  • Handles disabled states for menu items
  • Uses Tailwind CSS for styling, including dark mode support
  • Implements keyboard navigation and ARIA attributes for accessibility

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 an input component based on the provided props. It can be customized with various types, sizes, and behaviors.

Usage: 

@components.Input(components.InputProps{
  Type: components.Email,
  Placeholder: "Enter your email",
  ID: "email-input",
  Class: "custom-input",
  Attributes: templ.Attributes{
    "aria-label": "Email input",
    "data-testid": "email-input",
  },
})

Props:

  • Type: The type of the input field (e.g., Text, Email, Password). Default: Text
  • Placeholder: The placeholder text for the input field. Default: "" (empty string)
  • Value: The current value of the input field. Default: "" (empty string)
  • Name: The name attribute of the input field. Default: "" (empty string)
  • ID: The unique identifier for the input field. Default: "" (empty string)
  • Class: Additional CSS classes to apply to the input field. Default: "" (empty string)
  • Disabled: Can be either a bool or a string. If bool (Go), it directly controls the disabled state. If string, it's treated as a JavaScript expression for dynamic disabling. Default: nil
  • FileAccept: Specifies which file types are accepted (only for file type). Default: "" (empty string)
  • Attributes: Additional HTML attributes to apply to the input element. Default: nil

func LightIcon 

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

Modal renders a modal dialog component. It uses Alpine.js for state management and animations.

Usage: 

@components.ModalTrigger("default-modal") {
	@components.Button(components.ButtonProps{Text: "Open Modal"})
}

@components.Modal(components.ModalProps{ID: "default-modal", Class: "max-w-md"}) {
	@components.ModalHeader() {
		Are you absolutely sure?
	}
	@components.ModalBody() {
		This action cannot be undone. This will permanently delete your account and remove your data from our servers.
	}
	@components.ModalFooter() {
		<div class="flex gap-2">
			@components.ModalClose("default-modal") {
				@components.Button(components.ButtonProps{
					Text: "Cancel",
				})
			}
			@components.ModalClose("default-modal") {
				@components.Button(components.ButtonProps{
					Text:    "Continue",
					Variant: components.Secondary,
				})
			}
		</div>
	}
}

The Modal component should be used in conjunction with ModalTrigger to open it.

func ModalBody 

func ModalBody() templ.Component

ModalBody renders the main content area of the modal.

Usage: 

@components.ModalBody() {
  <p>This is the modal content.</p>
}

func ModalClose 

func ModalClose(id string) templ.Component

ModalClose renders an element that closes the modal when clicked.

Usage: 

@components.ModalClose("example-modal") {
  @components.Button(components.ButtonProps{
    Text: "Close",
    Variant: components.Secondary,
  })
}

The 'id' parameter should match the ID of the Modal you want to close.

func ModalFooter 

func ModalFooter() templ.Component

ModalFooter renders the footer section of the modal, typically containing action buttons.

Usage: 

@components.ModalFooter() {
  @components.ModalClose("example-modal") {
    @components.Button(components.ButtonProps{
      Text: "Close",
      Variant: components.Secondary,
    })
  }
}

func ModalHeader 

func ModalHeader() templ.Component

ModalHeader renders the header section of the modal.

Usage: 

@components.ModalHeader() {
  Modal Title
  @components.ModalClose("example-modal")
}

func ModalTrigger 

func ModalTrigger(id string) templ.Component

ModalTrigger renders an element that opens the modal when clicked.

Usage: 

@components.ModalTrigger("example-modal") {
  @components.Button(components.ButtonProps{Text: "Open Modal"})
}

The 'id' parameter should match the ID of the Modal you want to open. 

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

func RadioGroup added in v0.20.8 

func RadioGroup(props RadioGroupProps) templ.Component

RadioGroup renders a group of radio buttons. It uses Alpine.js for managing the selected state.

Usage: 

@components.RadioGroup(components.RadioGroupProps{
    DefaultValue: "option1",
    Name: "myRadioGroup",
    Required: true,
    Class: "my-custom-class",
}) {
    // RadioGroupItem components go here
}

func RadioGroupItem added in v0.20.8 

func RadioGroupItem(props RadioGroupItemProps) templ.Component

RadioGroupItem renders a single radio button with an integrated label. It uses Alpine.js for managing the disabled state and selected value.

Usage: 

@components.RadioGroupItem(components.RadioGroupItemProps{
    Value: "option1",
    Name: "myRadioGroup",
    ID: "option1",
    Disabled: "someCondition === true",  // Alpine.js expression
    Label: templ.Raw("Option 1"),
})

func Sheet 

func Sheet(props SheetProps) templ.Component

Sheet renders the main sheet component with backdrop and content.

Usage: 

@components.Sheet(components.SheetProps{
  Title: "Sheet Title",
  Description: "Sheet description goes here",
  Side: components.Right,
}) {
  // Sheet content goes here
}

Props:

  • Title: The heading text for the sheet. Default: "" (empty string)
  • Description: The subheading or description text for the sheet. Default: "" (empty string)
  • Side: Determines from which side the sheet will appear. Default: Right

func SheetClose 

func SheetClose(text string) templ.Component

SheetClose renders a button that closes the sheet when clicked.

Usage: 

@components.SheetClose("Close")

Props:

  • text: The text content of the close button

func SheetRoot 

func SheetRoot() templ.Component

SheetRoot renders the root component for the Sheet, setting up the Alpine.js data and event handlers.

Usage: 

@components.SheetRoot() {
  // Sheet trigger and content go here
}

func SheetTrigger 

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

SheetTrigger renders a trigger element that opens the sheet when clicked.

Usage: 

@components.SheetTrigger("Open Sheet", components.Right) {
  <button>Open Sheet</button>
}

Props:

  • text: The text content of the trigger (unused in the current implementation)
  • side: The side from which the sheet should appear
func Sidebar() templ.Component

func SidebarRight 

func SidebarRight() templ.Component

func Tabs 

func Tabs(props TabsProps) templ.Component

Tabs renders a tabbed interface component based on the provided props. It uses Alpine.js for interactivity and state management.

Usage: 

@components.Tabs(components.TabsProps{
  Tabs: []components.Tab{
    {ID: "1", Title: "Tab 1", Content: Tab1Content()},
    {ID: "2", Title: "Tab 2", Content: Tab2Content()},
  },
  TabsContainerClass: "w-full max-w-md",
  ContentContainerClass: "mt-4",
})

Props:

  • Tabs: An array of Tab structs, each representing a tab in the interface.
  • TabsContainerClass: Additional CSS classes for the tabs container. Default: "" (empty string)
  • ContentContainerClass: Additional CSS classes for the content container. Default: "" (empty string)

func ThemeSwitcher 

func ThemeSwitcher() templ.Component

func Toggle added in v0.21.0 

func Toggle(props ToggleProps) templ.Component

Toggle renders a toggle switch component based on the provided props. It can be customized with different label placements, and supports both static and dynamic states through Alpine.js integration.

Usage: 

// Basic toggle with label
@components.Toggle(components.ToggleProps{
    ID: "dark-mode",
    Name: "darkMode",
    LabelLeft: "Dark Mode",
})

// Toggle with Alpine.js binding
@components.Toggle(components.ToggleProps{
    ID: "notifications",
    Name: "notifications",
    LabelLeft: "Enable Notifications",
    Checked: "notificationsEnabled",
    Disabled: "isLoading",
})

// Toggle with custom size and label placement
@components.Toggle(components.ToggleProps{
    ID: "alerts",
    Name: "alerts",
    LabelLeft: "Alerts",
})

Props:

  • ID: The unique identifier for the toggle input. Required.
  • Name: The name attribute for the toggle input. Required.
  • LabelLeft: The text label for the toggle. Optional.
  • LabelRight: The text label for the toggle. Optional.
  • Checked: Controls the checked state. Can be bool or string for Alpine.js binding. Optional.
  • Disabled: Controls the disabled state. Can be bool or string for Alpine.js binding. Optional.
  • Class: Additional CSS classes. Optional.
  • Attributes: Additional HTML attributes. Optional.

Types

type AccordionItem 

type AccordionItem struct {
	// ID is the unique identifier for the accordion item.
	// It is used to manage the open/closed state of the item.
	ID string

	// Trigger is the content of the accordion item's header/trigger.
	// This is typically text, but can be any templ.Component.
	Trigger templ.Component

	// Content is the expandable content of the accordion item.
	// This can be any templ.Component.
	Content templ.Component
}

AccordionItem represents a single item in the Accordion component.

type AccordionProps 

type AccordionProps struct {
	// Items is a slice of AccordionItem structs representing each item in the accordion.
	Items []AccordionItem

	// Class specifies additional CSS classes to apply to the accordion container.
	// Default: "" (empty string)
	Class string

	// Attributes allows passing additional HTML attributes to the accordion container element.
	// Default: nil
	Attributes templ.Attributes
}

AccordionProps defines the properties for the Accordion component.

type AlertProps 

type AlertProps struct {
	// Variant determines the visual style of the alert.
	// Default: DefaultAlert
	Variant AlertVariant
	// Class specifies additional CSS classes to apply to the alert.
	// Default: "" (empty string)
	Class string
}

AlertProps defines the properties for the Alert component.

type AlertVariant 

type AlertVariant string

AlertVariant represents the visual style of the alert. 

const (
	DefaultAlert     AlertVariant = "default"
	DestructiveAlert AlertVariant = "destructive"
)

Constants for alert variants.

type AvatarProps 

type AvatarProps struct {
	// ImageSrc is the URL of the avatar image.
	// If empty, initials will be used.
	ImageSrc string

	// Name is used to generate initials if ImageSrc is empty.
	Name string

	// Size determines the size of the avatar.
	// Default: AvatarSizeMedium
	Size AvatarSize

	// Class specifies additional CSS classes to apply to the avatar.
	Class string

	// Attributes allows passing additional HTML attributes to the avatar element.
	Attributes templ.Attributes
}

AvatarProps defines the properties for the Avatar component.

type AvatarSize 

type AvatarSize string

AvatarSize represents the size of the avatar. 

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

type ButtonProps 

type ButtonProps struct {
	// Class specifies additional CSS classes to apply to the button.
	// Default: "" (empty string)
	Class string

	// Text is the content of the button.
	// Default: "" (empty string)
	Text string

	// Variant determines the visual style of the button.
	// Default: Default
	Variant ButtonVariant

	// Size sets the size of the button.
	// Default: Md
	Size ButtonSize

	// FullWidth determines whether the button should take up the full width of its container.
	// Default: false
	FullWidth bool

	// Href, if provided, renders the button as an anchor tag with this URL.
	// Default: "" (empty string)
	Href string

	// Target specifies the target attribute for the anchor tag (only used when Href is provided).
	// Default: "" (empty string)
	Target string

	// Disabled can be either a bool or a string.
	// If bool (Go), it directly controls the disabled state.
	// If string, it's treated as a JavaScript expression for dynamic disabling.
	Disabled any

	// Type specifies the type of the button. Default: "button"
	// Default: "" (empty string)
	Type string

	// Attributes allows passing additional HTML attributes to the button or anchor element.
	// Default: nil
	Attributes templ.Attributes

	// IconLeft specifies an icon component to be displayed on the left side of the button text.
	// Default: nil
	IconLeft templ.Component

	// IconRight specifies an icon component to be displayed on the right side of the button text.
	// Default: nil
	IconRight templ.Component
}

Button defines the properties for the Button component.

type ButtonSize 

type ButtonSize string

ButtonSize represents the size of the button.

type ButtonVariant 

type ButtonVariant string

ButtonVariant represents the visual style of the button.

type CardProps 

type CardProps struct {
	// Class specifies additional CSS classes to apply to the card.
	// Default: "" (empty string)
	Class string

	// Attributes allows passing additional HTML attributes to the card element.
	// Default: nil
	Attributes templ.Attributes
}

CardProps defines the properties for the Card component.

type CheckboxProps added in v0.20.4 

type CheckboxProps struct {
	// ID is the unique identifier for the checkbox input.
	ID string

	// Name is the name attribute for the checkbox input.
	Name string

	// Value is the value attribute for the checkbox input.
	Value string

	// Label is the text label associated with the checkbox.
	// If empty, no label will be rendered.
	Label string

	// Checked is a JavaScript expression for the checked state
	// Example: "true", "isSubscribed", "5+5===10"
	Checked string

	// Disabled is a JavaScript expression for the disabled state
	// Example: "true", "isLoading", "!isEnabled"
	Disabled string

	// Class specifies additional CSS classes for the container
	Class string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

CheckboxProps defines the properties for the Checkbox component.

type DatepickerProps 

type DatepickerProps struct {
	// ID is the unique identifier for the datepicker input.
	ID string

	// Name is the name attribute for the datepicker input.
	Name string

	// Placeholder is the placeholder text for the datepicker input.
	Placeholder string

	// Format specifies the date format to use. Options: "M d, Y", "MM-DD-YYYY", "DD-MM-YYYY", "YYYY-MM-DD", "D d M, Y"
	// Default: "M d, Y"
	Format string

	// Class specifies additional CSS classes to apply to the datepicker container.
	Class string

	// Attributes allows passing additional HTML attributes to the datepicker input element.
	Attributes templ.Attributes
}

DatepickerProps defines the properties for the Datepicker component. 

type DropdownMenuItem struct {
	Label     string             // The text to display for the menu item
	Value     string             // The value associated with the menu item (for non-link items)
	Href      string             // The URL to navigate to if the item is a link
	Target    string             // The target attribute for link items (e.g., "_blank" for new tab)
	IconLeft  templ.Component    // An optional icon component to display on the left side of the item
	IconRight templ.Component    // An optional icon component to display on the right side of the item
	SubItems  []DropdownMenuItem // A slice of DropdownMenuItems for nested submenus
	Disabled  bool               // Whether the item is disabled or not
	// Attributes allows passing additional HTML attributes to the accordion container element.
	// Default: nil
	Attributes templ.Attributes
}

DropdownMenuItem represents an item in the dropdown menu 

func (d DropdownMenuItem) ModifierClasses() string
type DropdownMenuProps struct {
	Items    []DropdownMenuItem // The list of items to display in the dropdown menu
	Trigger  templ.Component    // An optional custom trigger component (default is a button if not provided)
	Class    string             // Additional CSS classes to apply to the root element
	Position string             // The preferred position of the dropdown ("left", "right", "top", or "bottom")
}

DropdownMenuProps defines the properties for the DropdownMenu component

type InputProps 

type InputProps struct {
	// Type specifies the type of the input field.
	// Default: Text
	Type InputType

	// Placeholder is the placeholder text for the input field.
	// Default: "" (empty string)
	Placeholder string

	// Value is the current value of the input field.
	// Default: "" (empty string)
	Value string

	// Name is the name attribute of the input field.
	// Default: "" (empty string)
	Name string

	// ID is the unique identifier for the input field.
	// Default: "" (empty string)
	ID string

	// Class specifies additional CSS classes to apply to the input field.
	// Default: "" (empty string)
	Class string

	// Disabled can be either a bool or a string.
	// If bool (Go), it directly controls the disabled state.
	// If string, it's treated as a JavaScript expression for dynamic disabling.
	// Default: nil
	Disabled any

	// FileAccept specifies which file types are accepted (only for file type).
	// Default: "" (empty string)
	FileAccept string

	// Attributes allows passing additional HTML attributes to the input element.
	// Default: nil
	Attributes templ.Attributes
}

InputProps defines the properties for the Input component.

type InputType 

type InputType string

InputType represents the type of the input field. 

const (
	Text     InputType = "text"
	Password InputType = "password"
	Email    InputType = "email"
	Number   InputType = "number"
	Tel      InputType = "tel"
	URL      InputType = "url"
	Search   InputType = "search"
	Date     InputType = "date"
	Time     InputType = "time"
	File     InputType = "file"
)

Constants for input types.

type ModalProps 

type ModalProps struct {
	// ID is a unique identifier for the modal.
	// It's used to control opening and closing.
	// This should be unique across your application.
	ID string

	// Class specifies additional CSS classes to apply to the modal container.
	Class string
}

ModalProps defines the properties for the Modal component.

type RadioGroupItemProps added in v0.20.8 

type RadioGroupItemProps struct {
	// Value is the value attribute for the radio button.
	Value string

	// Name is the name attribute for the radio button, should match the RadioGroup's name.
	Name string

	// ID is the unique identifier for the radio button, used for labeling.
	ID string

	// Disabled is a string representing an Alpine.js expression for the disabled state.
	// It can be a boolean value ("true" or "false") or a more complex condition.
	// Examples:
	//   - "true" for always disabled
	//   - "false" for never disabled
	//   - "someVariable" to bind to an Alpine.js data property
	//   - "someCondition === true" for a dynamic condition
	Disabled string

	// Class specifies additional CSS classes to apply to the radio button container.
	Class string

	// Attributes allows passing additional HTML attributes to the radio button.
	Attributes templ.Attributes

	// Label is a templ.Component that represents the label for the radio button.
	// If not provided, the Value will be used as the label text.
	Label templ.Component
}

RadioGroupItemProps defines the properties for the RadioGroupItem component.

type RadioGroupProps added in v0.20.8 

type RadioGroupProps struct {
	// DefaultValue is the initial selected value for the radio group.
	DefaultValue string

	// Name is the name attribute for the radio group, used to group radio buttons.
	Name string

	// Required indicates whether the radio group is a required field.
	Required bool

	// Class specifies additional CSS classes to apply to the radio group container.
	Class string

	// Attributes allows passing additional HTML attributes to the radio group container.
	Attributes templ.Attributes
}

RadioGroupProps defines the properties for the RadioGroup component.

type SheetProps 

type SheetProps struct {
	// Title is the heading text for the sheet.
	// Default: "" (empty string)
	Title string

	// Description is the subheading or description text for the sheet.
	// Default: "" (empty string)
	Description string

	// Side determines from which side the sheet will appear.
	// Default: Right
	Side SheetSide
}

SheetProps defines the properties for the Sheet component.

type SheetSide 

type SheetSide string

SheetSide represents the side from which the sheet will appear. 

const (
	Top    SheetSide = "top"
	Right  SheetSide = "right"
	Bottom SheetSide = "bottom"
	Left   SheetSide = "left"
)

Constants for sheet sides.

type SidebarRightLItem 

type SidebarRightLItem struct {
	ImageSrc string
	Url      string
	Text     string
}

type Tab 

type Tab struct {
	// ID is the unique identifier for the tab.
	ID string

	// Title is the text displayed on the tab button.
	Title string

	// Content is the templ.Component to be rendered when the tab is active.
	Content templ.Component
}

Tab represents a single tab in the Tabs component.

type TabsProps 

type TabsProps struct {
	// Tabs is an array of Tab structs representing each tab in the component.
	Tabs []Tab

	// TabsContainerClass specifies additional CSS classes for the tabs container.
	// Default: "" (empty string)
	TabsContainerClass string

	// ContentContainerClass specifies additional CSS classes for the content container.
	// Default: "" (empty string)
	ContentContainerClass string
}

TabsProps defines the properties for the Tabs component.

type ToggleLabelPlacement added in v0.21.0 

type ToggleLabelPlacement string

ToggleLabelPlacement represents where the label should be placed

type ToggleProps added in v0.21.0 

type ToggleProps struct {
	// ID is the unique identifier for the toggle input
	ID string

	// Name is the name attribute for the toggle input
	Name string

	// Label is the text label for the toggle
	LabelLeft string

	// Label is the text label for the toggle
	LabelRight string

	// It's treated as an Alpine.js expression for dynamic checking.
	// Example bool: Checked: "true"
	// Example string: Checked: "darkMode"
	Checked string

	// It's treated as an Alpine.js expression for dynamic checking.
	// Example bool: Disabled: "true"
	// Example string: Disabled: "isLoading"
	Disabled string

	// Class specifies additional CSS classes
	Class string

	// Attributes allows passing additional HTML attributes
	Attributes templ.Attributes
}

ToggleProps defines the properties for the Toggle component

type ToggleSize added in v0.21.0 

type ToggleSize string

ToggleSize represents the size of the toggle

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.