Documentation
¶
Overview ¶
templ: version: v0.3.1036
templ: version: v0.3.1036
templ: version: v0.3.1036
Package display provides button components.
templ: version: v0.3.1036
templ: version: v0.3.1036
Package display provides UI components for data visualization and interactive elements including cards, tables, tabs, dropdowns, modals, tooltips, avatars, badges, and more.
templ: version: v0.3.1036
templ: version: v0.3.1036
templ: version: v0.3.1036
Package display provides modal dialog components and related functionality.
templ: version: v0.3.1036
templ: version: v0.3.1036
templ: version: v0.3.1036
templ: version: v0.3.1036
Index ¶
- func Accordion(props AccordionProps) templ.Component
- func Avatar(props AvatarProps) templ.Component
- func Badge(props BadgeProps) templ.Component
- func Button(props ButtonProps) templ.Component
- func Card(props CardProps) templ.Component
- func Drawer(props DrawerProps) templ.Component
- func Dropdown(props DropdownProps) templ.Component
- func EmptyState(props EmptyStateProps) templ.Component
- func Modal(props ModalProps) templ.Component
- func SimpleCard(props SimpleCardProps) templ.Component
- func SimpleEmptyState(message string) templ.Component
- func StatCard(props StatCardProps) templ.Component
- func StatusBadge(status string) templ.Component
- func Table(props TableProps) templ.Component
- func Tabs(props TabsProps) templ.Component
- func Tooltip(props TooltipProps) templ.Component
- type AccordionItem
- type AccordionProps
- type AvatarProps
- type AvatarShape
- type AvatarSize
- type AvatarStatus
- type BadgeProps
- type BadgeSize
- type BadgeType
- type ButtonProps
- type ButtonSize
- type ButtonType
- type CardPadding
- type CardProps
- type DrawerProps
- type DrawerSide
- type DrawerSize
- type DropdownItem
- type DropdownItemKind
- type DropdownPosition
- type DropdownProps
- type EmptyStateProps
- type ModalProps
- type ModalSize
- type SimpleCardProps
- type StatCardProps
- type Tab
- type TableCell
- type TableProps
- type TableRow
- type TabsProps
- type TabsVariant
- type TooltipPosition
- type TooltipProps
- type TrendDirection
Examples ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Accordion ¶
func Accordion(props AccordionProps) templ.Component
Accordion renders a collapsible accordion with accessible markup
@display.Accordion(display.AccordionProps{
Items: []display.AccordionItem{
{ID: "faq1", Title: "What is this?", Open: true},
{ID: "faq2", Title: "How does it work?"},
},
})
func Avatar ¶
func Avatar(props AvatarProps) templ.Component
Avatar renders a user avatar with image, initials, or fallback
@display.Avatar(display.AvatarProps{Src: "/avatar.jpg", Alt: "Alice"})
func Badge ¶
func Badge(props BadgeProps) templ.Component
Badge renders a compact status label
@display.Badge(display.BadgeProps{Text: "Active", Type: display.BadgeSuccess, Dot: true})
Example ¶
package main
import (
"bytes"
"context"
"fmt"
"github.com/larsartmann/templ-components/display"
)
func main() {
props := display.DefaultBadgeProps()
props.Text = "Beta"
props.Type = display.BadgeInfo
var buf bytes.Buffer
_ = display.Badge(props).Render(context.Background(), &buf)
fmt.Println(buf.String())
// Output will contain the badge text and Tailwind classes
}
Output:
func Button ¶
func Button(props ButtonProps) templ.Component
Button renders a button or link styled as a button. When Href is set, renders as an anchor tag; otherwise renders as a button element.
@display.Button(display.DefaultButtonProps())
@display.Button(display.ButtonProps{Text: "Save", Type: "submit"})
@display.Button(display.ButtonProps{Text: "Docs", Href: "/docs", Variant: display.ButtonSecondary})
func Card ¶
Card renders a bordered card with optional header and footer
@display.Card(display.CardProps{Title: "Users", Subtitle: "Manage your users"}) {
<p>Card content goes here</p>
}
Example ¶
package main
import (
"bytes"
"context"
"fmt"
"github.com/larsartmann/templ-components/display"
)
func main() {
props := display.DefaultCardProps()
props.Title = "Hello World"
var buf bytes.Buffer
_ = display.Card(props).Render(context.Background(), &buf)
fmt.Println(buf.String())
}
Output:
func Drawer ¶ added in v0.3.0
func Drawer(props DrawerProps) templ.Component
Drawer renders an accessible side panel that slides in from the left or right
@display.Drawer(display.DrawerProps{Title: "Settings", ID: "settings-drawer", Side: display.DrawerRight, Open: true, Nonce: nonce}) {
<p>Drawer content</p>
}
func Dropdown ¶
func Dropdown(props DropdownProps) templ.Component
Dropdown renders a button-triggered action menu
@display.Dropdown(display.DropdownProps{
Label: "Actions",
Items: []display.DropdownItem{
{Text: "Edit", Href: "/edit"},
{Text: "Delete", Href: "/delete"},
},
})
func EmptyState ¶
func EmptyState(props EmptyStateProps) templ.Component
EmptyState renders a centered empty state with icon, title, description, and optional action
@display.EmptyState(display.EmptyStateProps{
Title: "No repositories",
Description: "Connect your first repository to get started.",
Icon: "folder",
ActionText: "Connect Repository",
ActionHref: "/repos/connect",
})
func Modal ¶
func Modal(props ModalProps) templ.Component
Modal renders an accessible modal dialog with backdrop
@display.Modal(display.ModalProps{Title: "Confirm", ID: "confirm-modal", Nonce: nonce}) {
<p>Are you sure?</p>
}
func SimpleCard ¶
func SimpleCard(props SimpleCardProps) templ.Component
SimpleCard renders a card without header/footer for quick use. Internally composes through Card for consistent shell styling.
@display.SimpleCard(display.SimpleCardProps{}) {
<p>Content</p>
}
func SimpleEmptyState ¶
SimpleEmptyState is a minimal empty state for inline use
@display.SimpleEmptyState("No items found")
func StatCard ¶
func StatCard(props StatCardProps) templ.Component
StatCard renders a dashboard stat card with value, label, optional change indicator, and an optional leading icon tile.
@display.StatCard(display.StatCardProps{Label: "Users", Value: "1,204", Icon: icons.Users})
Example ¶
package main
import (
"bytes"
"context"
"fmt"
"github.com/larsartmann/templ-components/display"
)
func main() {
props := display.DefaultStatCardProps()
props.Value = "$12,345"
props.Label = "Total Revenue"
props.Trend = display.TrendUp
props.Change = "+12.5%"
var buf bytes.Buffer
_ = display.StatCard(props).Render(context.Background(), &buf)
fmt.Println(buf.String())
}
Output:
func StatusBadge ¶
StatusBadge is a convenience wrapper for common status values Maps status strings to badge types automatically
@display.StatusBadge("active")
func Table ¶
func Table(props TableProps) templ.Component
Table renders a responsive data table
@display.Table(display.TableProps{
Headers: []string{"Name", "Email", "Role"},
Rows: []display.TableRow{
display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
display.SimpleTableRow("Bob", "bob@example.com", "User"),
},
})
func Tabs ¶
Tabs renders a tabbed interface with accessible markup
@display.Tabs(display.TabsProps{
ActiveTabID: "users",
Tabs: []display.Tab{
{ID: "users", Label: "Users"},
{ID: "settings", Label: "Settings"},
},
})
func Tooltip ¶
func Tooltip(props TooltipProps) templ.Component
Tooltip wraps content in a hover-activated tooltip
@display.Tooltip(display.TooltipProps{Text: "More info"}) {
<button>Hover me</button>
}
Types ¶
type AccordionItem ¶
AccordionItem represents a single collapsible panel
type AccordionProps ¶
type AccordionProps struct {
utils.BaseProps
Items []AccordionItem
}
AccordionProps configures an accordion component
func DefaultAccordionProps ¶
func DefaultAccordionProps() AccordionProps
DefaultAccordionProps returns sensible defaults
type AvatarProps ¶
type AvatarProps struct {
utils.BaseProps
Src string
Alt string
Initials string
Size AvatarSize
Shape AvatarShape
Status AvatarStatus
}
AvatarProps configures an avatar component
func DefaultAvatarProps ¶
func DefaultAvatarProps() AvatarProps
DefaultAvatarProps returns sensible defaults
type AvatarShape ¶
type AvatarShape string
AvatarShape defines the shape of an avatar
const ( AvatarShapeCircle AvatarShape = "circle" AvatarShapeSquare AvatarShape = "square" )
type AvatarSize ¶
type AvatarSize string
AvatarSize defines the size of an avatar
const ( AvatarSizeXS AvatarSize = "xs" AvatarSizeSM AvatarSize = "sm" AvatarSizeMD AvatarSize = "md" AvatarSizeLG AvatarSize = "lg" AvatarSizeXL AvatarSize = "xl" )
type AvatarStatus ¶
type AvatarStatus string
AvatarStatus represents the online status indicator for an avatar
const ( AvatarStatusNone AvatarStatus = "" AvatarStatusOnline AvatarStatus = "online" AvatarStatusOffline AvatarStatus = "offline" )
type BadgeProps ¶
type BadgeProps struct {
utils.BaseProps
Text string
Type BadgeType
Size BadgeSize
Pill bool
Dot bool
Href string
}
BadgeProps configures a status badge
func DefaultBadgeProps ¶
func DefaultBadgeProps() BadgeProps
DefaultBadgeProps returns sensible defaults
type ButtonProps ¶
type ButtonProps struct {
utils.BaseProps
Text string
Type string // button, submit, reset (ignored when Href is set)
Href string // if set, renders as <a> instead of <button>
Variant ButtonType // default: Primary
Size ButtonSize // default: MD
Disabled bool
Icon templ.Component
External bool // adds target="_blank" and rel="noopener noreferrer" for links
}
ButtonProps configures a button or link styled as a button
func DefaultButtonProps ¶
func DefaultButtonProps() ButtonProps
DefaultButtonProps returns sensible defaults
type ButtonSize ¶
type ButtonSize string
ButtonSize defines the size of a button
const ( ButtonSizeSM ButtonSize = "sm" ButtonSizeMD ButtonSize = "md" ButtonSizeLG ButtonSize = "lg" )
Button size constants
type ButtonType ¶
type ButtonType string
ButtonType defines the visual style of a button
const ( ButtonPrimary ButtonType = "primary" ButtonSecondary ButtonType = "secondary" ButtonDanger ButtonType = "danger" ButtonGhost ButtonType = "ghost" ButtonLink ButtonType = "link" )
Button variant constants
type CardPadding ¶
type CardPadding string
CardPadding defines the internal padding of a card
const ( CardPaddingNone CardPadding = "none" CardPaddingSM CardPadding = "sm" CardPaddingMD CardPadding = "md" CardPaddingLG CardPadding = "lg" )
type CardProps ¶
type CardProps struct {
utils.BaseProps
Title string
Subtitle string
HeaderAction templ.Component
Padding CardPadding
}
CardProps configures a card container
func DefaultCardProps ¶
func DefaultCardProps() CardProps
DefaultCardProps returns sensible defaults
type DrawerProps ¶ added in v0.3.0
type DrawerProps struct {
utils.BaseProps
Title string
Open bool
Side DrawerSide
Size DrawerSize
}
DrawerProps configures a drawer (side panel) component
func DefaultDrawerProps ¶ added in v0.3.0
func DefaultDrawerProps() DrawerProps
DefaultDrawerProps returns sensible defaults
type DrawerSide ¶ added in v0.3.0
type DrawerSide string
DrawerSide defines which side the drawer slides in from
const ( DrawerLeft DrawerSide = "left" DrawerRight DrawerSide = "right" )
type DrawerSize ¶ added in v0.3.0
type DrawerSize string
DrawerSize defines the width of the drawer panel
const ( DrawerSizeSM DrawerSize = "sm" DrawerSizeMD DrawerSize = "md" DrawerSizeLG DrawerSize = "lg" DrawerSizeXL DrawerSize = "xl" DrawerFull DrawerSize = "full" )
type DropdownItem ¶
type DropdownItem struct {
Text string
Href string
Icon icons.Name
Kind DropdownItemKind
External bool
Disabled bool
Attrs templ.Attributes
}
DropdownItem represents a single action in a dropdown menu
func (DropdownItem) IsLink ¶
func (item DropdownItem) IsLink() bool
IsLink returns true if the item should render as a link. When Kind is unset, falls back to Href-based discrimination for backward compat.
type DropdownItemKind ¶
type DropdownItemKind string
DropdownItemKind determines how a dropdown item is rendered
const ( // DropdownItemLink renders the item as an anchor (<a>) element DropdownItemLink DropdownItemKind = "link" // DropdownItemButton renders the item as a <button> element DropdownItemButton DropdownItemKind = "button" )
type DropdownPosition ¶
type DropdownPosition string
DropdownPosition defines where the dropdown menu appears
const ( DropdownPositionLeft DropdownPosition = "left" DropdownPositionRight DropdownPosition = "right" )
type DropdownProps ¶
type DropdownProps struct {
utils.BaseProps
Label string
Items []DropdownItem
Position DropdownPosition
}
DropdownProps configures a dropdown action menu
func DefaultDropdownProps ¶
func DefaultDropdownProps() DropdownProps
DefaultDropdownProps returns sensible defaults
type EmptyStateProps ¶
type EmptyStateProps struct {
utils.BaseProps
Title string
Description string
Icon icons.Name
ActionText string
ActionHref string
ActionAttrs templ.Attributes
}
EmptyStateProps configures an empty state illustration
func DefaultEmptyStateProps ¶
func DefaultEmptyStateProps() EmptyStateProps
DefaultEmptyStateProps returns sensible defaults
type ModalProps ¶
ModalProps configures a modal dialog
func DefaultModalProps ¶
func DefaultModalProps() ModalProps
DefaultModalProps returns sensible defaults
type SimpleCardProps ¶
type SimpleCardProps struct {
utils.BaseProps
Padding CardPadding
}
SimpleCardProps configures a simple card without header/footer
func DefaultSimpleCardProps ¶
func DefaultSimpleCardProps() SimpleCardProps
DefaultSimpleCardProps returns sensible defaults
type StatCardProps ¶
type StatCardProps struct {
utils.BaseProps
Value string
Label string
Change string
Trend TrendDirection
// Icon optionally renders a leading icon tile (e.g. icons.Users).
Icon icons.Name
}
StatCardProps configures a dashboard stat card
func DefaultStatCardProps ¶
func DefaultStatCardProps() StatCardProps
DefaultStatCardProps returns sensible defaults
type TableCell ¶
TableCell represents a single cell in a table row. When Content is set, it takes priority over Text for rendering.
type TableProps ¶
type TableProps struct {
utils.BaseProps
Caption string
Headers []string
Rows []TableRow
Striped bool
Hover bool
Bordered bool
}
TableProps configures a data table
func DefaultTableProps ¶
func DefaultTableProps() TableProps
DefaultTableProps returns sensible defaults
type TableRow ¶
type TableRow struct {
Cells []TableCell
}
TableRow represents a single row in a table
func SimpleTableRow ¶
SimpleTableRow creates a row from string values for convenience
type TabsProps ¶
type TabsProps struct {
utils.BaseProps
Tabs []Tab
ActiveTabID string
Variant TabsVariant
ClientSide bool
}
TabsProps configures a tab component
func DefaultTabsProps ¶
func DefaultTabsProps() TabsProps
DefaultTabsProps returns sensible defaults
type TabsVariant ¶
type TabsVariant string
TabsVariant defines the visual style of tabs
const ( TabsDefault TabsVariant = "default" TabsPills TabsVariant = "pills" )
type TooltipPosition ¶
type TooltipPosition string
TooltipPosition defines where the tooltip appears relative to the trigger
const ( TooltipPositionTop TooltipPosition = "top" TooltipPositionBottom TooltipPosition = "bottom" TooltipPositionLeft TooltipPosition = "left" TooltipPositionRight TooltipPosition = "right" )
type TooltipProps ¶
type TooltipProps struct {
utils.BaseProps
Text string
Position TooltipPosition
}
TooltipProps configures a tooltip component
func DefaultTooltipProps ¶
func DefaultTooltipProps() TooltipProps
DefaultTooltipProps returns sensible defaults
type TrendDirection ¶
type TrendDirection string
TrendDirection represents the direction of a stat change
const ( TrendUp TrendDirection = "up" TrendDown TrendDirection = "down" TrendNone TrendDirection = "none" )