modal

Documentation

Overview

Package modal adds modals. Each modal embeds a form.C component, yous only have to add inputs and use Cancel/Confirm buttons.

Usage:

// with a form, embedding the content in the modal
@modal.C(modal.D{
	ID: "profile",
	Title: "Profile",
	Content: [...], // your form
	Form: &form.D{},
	Close: &button.Button(button.D{Style: button.StyleOutline, Label: "Cancel"}),
	Confirm: &button.Button(button.D{Label: "Save"}),
})

// without form,
@modal.C(modal.D{
	ID: "modal",
	Title: "Modal example",
	Content: [...], // your form
	Close: &button.Button(button.D{Label: "OK"}),
})

// content as children
@modal.C(modal.D{[...]}) {
	// your form
}

The cancel button closes the modal, the confirm does not. To close a modal, just add modal.Close to your submit response:

components.Append(yourResponseComponent, modal.Close("profile"))

templ: version: v0.2.793

Index

• Constants
• func C(def D) templ.Component
• func Close(id string) templ.Component
• func Retarget(ctx context.Context, def D, w http.ResponseWriter, statusCode int) error
• type D
• type MaxWidth

Constants

const (
	StyleButtonsRight style.Style = 1 << 8
)

Functions

func C

func C(def D) templ.Component

func Close

func Close(id string) templ.Component

Close closes a modal.

func Retarget

func Retarget(ctx context.Context, def D, w http.ResponseWriter, statusCode int) error

Retarget returns a HTMX response that retargets the response to display the response at the end of the body, ignoring the initial target. When using error status codes, do not forget to add your error codes to the list of codes for which HTMX swaps the content - https://htmx.org/docs/#requests

Types

type D

type D struct {
	// ID is the modal ID. It is mandatory.
	ID string
	// Style defines the modal style.
	Style style.Style
	// MaxWidth defines the modal max width ("max-w-screen-md" by default).
	MaxWidth MaxWidth
	// Title is the modal title.
	Title string
	// Form defines the optional form tag that will enclose both content and buttons.
	Form *form.D
	// Content is the modal content (as an alternative, you can add the content as the component children).
	Content any
	// Close is the close button. It closes the modal without submitting the form.
	//playground:import:github.com/jfbus/templui/components/button
	//playground:default:&button.D{Label:"Cancel", Style: button.StyleOutline}
	Close *button.D
	// Confirm is the confirm button. It submits the modal form but does not close the modal.
	// Add modal.Close() to your success response to close the modal.
	//playground:default:&button.D{Label:"OK"}
	Confirm *button.D
	// CustomStyle defines a custom style.
	// 	style.Custom{
	// 		"modal/background":  style.D{style.Add("...")},
	// 		"modal":             style.D{style.Add("...")},
	// 		"modal/title":       style.D{style.Add("...")},
	// 		"modal/title/title": style.D{style.Add("...")},
	// 		"modal/close":       style.D{style.Add("...")},
	// 		"modal/buttons":     style.D{style.Add("...")},
	//	}
	CustomStyle style.Custom
}

type MaxWidth

type MaxWidth string

const (
	MaxWidthScreenMD MaxWidth = "max-w-screen-md"
	MaxWidthScreenSM MaxWidth = "max-w-screen-sm"
)