inline

Documentation

Overview

Package inline implements inline edits.

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/icon"
	"github.com/jfbus/templui/components/inline"
	"github.com/jfbus/templui/components/input"
	"github.com/jfbus/templui/components/label"
	"github.com/jfbus/templui/components/position"
	"github.com/jfbus/templui/components/size"
)

func main() {
	c := inline.C(inline.D{
		Value:    "Previous value",
		IconSize: size.S,
		Focus:    "itemtitle",
		Edit: input.C(input.D{
			Name:         "title",
			Label:        label.D{Label: "Title", Hide: true},
			Value:        "Previous value",
			Icon:         icon.CornerDownLeft,
			IconPosition: position.End,
			Size:         size.S,
			Loader:       true,
			Attributes: templ.Attributes{
				"hx-post":   "/items/update_title/24",
				"hx-target": "#item_24",
				"x-ref":     "itemtitle",
			},
		}),
	})
	c.Render(context.TODO(), os.Stdout)
}

Types

type D

type D struct {
	// Value defines the current value.
	Value string
	// IconSize defines the size of the icon.
	IconSize size.Size
	// Edit is the component used to edit the value.
	//playground:import:github.com/jfbus/templui/components/input
	//playground:default:input.C(input.D{Name:"edit"})
	Edit templ.Component
	// DefaultEdit defines if the default display is the Edit component or the text value.
	DefaultEdit bool
	// Focus defines the input field that needs to have the focus after. You'll need to add a "x-ref" attribute to this input.
	Focus string
}

D is the definition for inline edits.