TemplUI

This library aims to provide common web ui elements a functional and styling layer over templ.

Install

go install github.com/iamajoe/templui

Documentation

The components are built under functional options pattern. As such, You construct the elements as you see fit by chaining the options together into the New function.

@button.New(
	WithID("zing"),
	WithClasses("bg-indigo-500"),
)

Extending

You can easily extend the component to be able to use them throughout your project by wrapping them in a function.

func ProjectButton(id string, color string) templ.Component {
    return button.New(
        WithClasses("bg-" + color),
        WithAttributes(map[string]any{"data-id": id}),
        WithKind(button.KindSubmit),
    )
}

@ProjectButton("indigo-500")

Or you could for example create a props slice depending on incoming data:

func GetButtonProps(id string, color string, disabled bool) []button.OptsFn {
    opts := []button.OptsFn {
        WithClasses("bg-" + color),
        WithAttributes(map[string]any{"data-id": id}),
        WithKind(button.KindSubmit),
    }

    if disabled {
        opts = append(opts, WithClasses("pointer-events-none"))
    }

    return opts
}

@button.New(GetButtonProps("zed", "indigo-500", true)...)

Components

Development

Build

Whenever a .templ file is changed, the .go file according to that component needs to be generated. You can do so with:

make build

Test

make test

topi314 / templui