components

package module
v0.0.0-...-8e8f6cc Latest Latest
Warning

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

Go to latest
Published: May 21, 2024 License: MIT Imports: 2 Imported by: 0

README

Free Reusable Templ Components

✅ A collection of reusable UI components built with Golang's templ, TailwindCSS, Daisy UI, and Alpine.js.

Templ

A language for writing HTML user interfaces in Go.

https://github.com/a-h/templ

util.go

util.go includes a helper GenerateUniqueKey. I used this dead simple helper to generate a unique ID for most all components.

func GenerateUniqueKey(id string) string {
	return id + "-" + strconv.Itoa(rand.Intn(100000))
}

Components

  • alert.templ - Displays alert messages.
  • breadcrumb.templ - Navigational breadcrumb.
  • button-link.templ - Button styled as a link.
  • button-primary.templ - Primary button style.
  • card.templ - Card component.
  • checkbox.templ - Checkbox input.
  • chip.templ - Chip component.
    count up component
  • cookies-warning.templ - Cookies warning message.
    count up component
  • count-up.templ - Count-up animation component.
    count up component
  • details.templ - Details and summary component.
    count up component
  • input.templ - Input field component.
  • loading.templ - Loading spinner component.
  • modal.templ - Modal dialog component.
    count up component
  • progress.templ - Progress bar component.
  • tabs.templ - Tabbed navigation component.
    count up component
  • timeline.templ - Timeline component.

Usage

All components contain usage details for example here's input.templ:

/**
* Text Input Component.
* ======================
* This is a input component that can be used to create text inputs.
*
* @params InputProps
* @author: github.com/tego101 <-> x.com/tegodotdev
* @license: MIT
*
* Usage:
* @components.Input(components.InputProps{
*   Type: "text",
*   Name: "First Name",
*   Placeholder: "Enter your name",
*   Class: "max-w-6xl",
*   HideLabel: true,
* })
 */

Disclaimer

Some components may be unfinished. Contributions and pull requests are welcome to help complete them.

Usage

Include the desired component in your Golang templ file, and adjust the TailwindCSS classes and Alpine.js behavior as needed.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func GenerateUniqueKey

func GenerateUniqueKey(id string) string

Types

This section is empty.

Directories

Path Synopsis
templ: version: v0.2.663
templ: version: v0.2.663

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL