dropdown

Documentation

Overview

Package dropdown implements dropdowns. When clicked, the button will display a dropdown menu containing: - a header - link sections, each separated by an horizontal separator.

Usage:

@dropdown.C(dropdown.D{
	Button: button.D{Label: "Menu"},
	Header: usernameComponent,
	Links: [][]a.D{{
		{Href: "/profile", Text: "Profile"},
	}, {
		{Href: "/logout", Text: "Logout"},
	}},
})

templ: version: v0.2.793

Index

• func C(def D) templ.Component
• type D

Examples

• C

Functions

func C

func C(def D) templ.Component

Example

package main

import (
	"context"
	"os"

	"github.com/a-h/templ"
	"github.com/jfbus/templui/components/a"
	"github.com/jfbus/templui/components/button"
	"github.com/jfbus/templui/components/dropdown"
)

func usernameComponent() templ.Component {
	return templ.Raw("User Name")
}

func main() {
	c := dropdown.C(dropdown.D{
		Button: button.D{Label: "Menu"},
		Header: usernameComponent(),
		Links: [][]a.D{{
			{Href: "/profile", Text: "Profile"},
		}, {
			{Href: "/logout", Text: "Logout"},
		}},
	})

	_ = c.Render(context.TODO(), os.Stdout)
}

Types

type D

type D struct {
	//playground:import:github.com/jfbus/templui/components/button
	//playground:default:button.D{Label:"Open dropdown"}
	Button button.D
	//playground:default:templ.Raw(`<div class="font-medium text-normal">Lorem ipsum</div><div class="text-sm text-gray-500">dolor sit amet</div>`)
	Header templ.Component
	//playground:import:github.com/jfbus/templui/components/a
	//playground:default:[][]a.D{{{Href:"#", Text: "Section 1 link 1"},{Href:"#", Text: "Section 1 link 2"}},{{Href:"#", Text: "Section 2 link 1"}}}
	Links [][]a.D
	// CustomStyle defines a custom style.
	// 	style.Custom{
	// 		"dropdown": style.D{style.Add("...")},
	// 		"dropdown/link": style.D{style.Add("...")},
	//	}
	CustomStyle style.Custom
}