components

package
v0.20.1 Latest Latest
Warning

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

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

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,
  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

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 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 Footer() templ.Component

func Icon 

func Icon(props IconProps) templ.Component

Icon renders a Lucide icon as an SVG element.

Usage: 

@components.Icon(components.IconProps{
  Name: "user",
  Size: "24",
  Color: "blue",
  Fill: "none",
  Stroke: "currentColor",
  Class: "my-icon-class",
})

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 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

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
}

ButtonProps 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 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 IconProps 

type IconProps struct {
	Name   string // Name of the icon
	Size   string // Size of the icon (default: "24")
	Color  string // Color of the icon (default: "currentColor")
	Fill   string // Fill color of the icon (default: "none")
	Stroke string // Stroke color of the icon (overrides Color if set)
	Class  string // Additional CSS classes
}

IconProps defines the properties for the Icon component.

func (IconProps) GenerateSVG 

func (props IconProps) GenerateSVG() (string, bool)

GenerateSVG generates the SVG for the icon

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 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.

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.