image

Documentation

Index

• Variables
• func Image(p ImageProps) templ.Component
• func ImageClasses(p ImageProps) string
• func Picture(p PictureProps) templ.Component
• func Source(p SourceProps) templ.Component
• type ImageProps
• type PictureProps
• type SourceProps

Variables

var ImageVariants = uiutils.Variants{
	Base: "block max-w-full",
	Keys: []string{"variant", "size", "fit", "position", "aspect"},
	Defaults: map[string]string{
		"variant":  "default",
		"size":     "auto",
		"fit":      "cover",
		"position": "center",
		"aspect":   "auto",
	},
	ByKey: map[string]map[string]string{
		"variant": {
			"default":   "",
			"rounded":   "rounded-md",
			"avatar":    "rounded-full",
			"thumbnail": "rounded-md border border-border",
			"logo":      "object-contain",
			"unstyled":  "",
		},
		"size": {
			"auto":    "",
			"default": "",
			"xs":      "h-6 w-6",
			"sm":      "h-8 w-8",
			"md":      "h-12 w-12",
			"lg":      "h-16 w-16",
			"xl":      "h-24 w-24",
			"full":    "h-full w-full",
		},
		"fit": {
			"contain":    "object-contain",
			"cover":      "object-cover",
			"fill":       "object-fill",
			"none":       "object-none",
			"scale-down": "object-scale-down",
		},
		"position": {
			"bottom":       "object-bottom",
			"center":       "object-center",
			"left":         "object-left",
			"right":        "object-right",
			"top":          "object-top",
			"left-bottom":  "object-left-bottom",
			"left-top":     "object-left-top",
			"right-bottom": "object-right-bottom",
			"right-top":    "object-right-top",
		},
		"aspect": {
			"auto":   "aspect-auto",
			"square": "aspect-square",
			"video":  "aspect-video",
		},
	},
}

Functions

func Image

func Image(p ImageProps) templ.Component

Image renders an accessible img element.

func ImageClasses

func ImageClasses(p ImageProps) string

func Picture

func Picture(p PictureProps) templ.Component

Picture renders a responsive image wrapper.

func Source

func Source(p SourceProps) templ.Component

Source renders a source candidate for picture, video, or audio.

Types

type ImageProps

type ImageProps struct {
	Variant       string
	Size          string
	Class         string
	Src           string
	SrcSet        string
	Sizes         string
	Alt           string
	Width         string
	Height        string
	Fit           string
	Position      string
	Aspect        string
	Loading       string
	Decoding      string
	FetchPriority string
	Decorative    bool
	ID            string
	Attrs         templ.Attributes
}

ImageProps configures a native img element.

type PictureProps

type PictureProps struct {
	Class string
	Attrs templ.Attributes
}

PictureProps configures a picture wrapper.

type SourceProps

type SourceProps struct {
	SrcSet string
	Src    string
	Media  string
	Type   string
	Sizes  string
	Attrs  templ.Attributes
}

SourceProps configures source for picture, video, or audio.