components

package
v1.0.2 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 12, 2026 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

templ: version: v0.3.977

Index

Constants

This section is empty.

Variables

This section is empty.

Functions 

func Breadcrumb(props BreadcrumbProps, content elements.Items) templ.Component

Breadcrumb renders the Bulma `.breadcrumb` container. 

func BreadcrumbIcon(props BreadcrumbIconProps) templ.Component

BreadcrumbIcon renders a breadcrumb icon. 

func BreadcrumbItem(props BreadcrumbItemProps, content elements.Items) templ.Component

BreadcrumbItem renders a breadcrumb list item. 

func BreadcrumbLink(props BreadcrumbLinkProps, content elements.Items) templ.Component

BreadcrumbLink renders a breadcrumb link. 

func BreadcrumbList(props BreadcrumbListProps, content elements.Items) templ.Component

BreadcrumbList renders a breadcrumb list container.

func Card 

func Card(props CardProps, content elements.Items) templ.Component

Card renders a Bulma `.card` container.

func CardContent 

func CardContent(props CardContentProps, content elements.Items) templ.Component

CardContent renders `.card-content`.

func CardFooter 

func CardFooter(props CardFooterProps, content elements.Items) templ.Component

CardFooter renders `.card-footer`.

func CardFooterItem 

func CardFooterItem(props CardFooterItemProps, content elements.Items) templ.Component

CardFooterItem renders `.card-footer-item`.

func CardHeader 

func CardHeader(props CardHeaderProps, content elements.Items) templ.Component

CardHeader renders a Bulma `.card-header`.

func CardHeaderIcon 

func CardHeaderIcon(props CardHeaderIconProps, content elements.Items) templ.Component

CardHeaderIcon renders `.card-header-icon`.

func CardHeaderTitle 

func CardHeaderTitle(props CardHeaderTitleProps, content elements.Items) templ.Component

CardHeaderTitle renders `.card-header-title`. 

func Dropdown(props DropdownProps, content elements.Items) templ.Component

Dropdown renders the root `.dropdown` container. 

func DropdownDivider() templ.Component

DropdownDivider renders a Bulma `.dropdown-divider`. Atomic level: ATOM

Used to visually separate dropdown items. 

func DropdownItem(props DropdownItemProps, content elements.Items) templ.Component

DropdownItem renders a Bulma `.dropdown-item`. 

func DropdownMenu(props DropdownMenuProps, content elements.Items) templ.Component

DropdownMenu renders a Bulma dropdown menu container. 

func DropdownTrigger(props DropdownTriggerProps, content elements.Items) templ.Component

DropdownTrigger renders a Bulma `.dropdown-trigger`. 

func Menu(props MenuProps, content elements.Items) templ.Component

Menu renders the root `.menu` container. 

func MenuItem(props MenuItemProps, content elements.Items) templ.Component

MenuItem renders a menu link. 

func MenuLabel(props MenuLabelProps, content elements.Items) templ.Component

MenuLabel renders a menu section label. 

func MenuList(props MenuListProps, content elements.Items) templ.Component

MenuList renders a menu list container.

func Message 

func Message(props MessageProps, content elements.Items) templ.Component

Message renders the root `.message` container.

func MessageBody 

func MessageBody(props MessageBodyProps, content elements.Items) templ.Component

MessageBody renders a Bulma `.message-body`.

func MessageHeader 

func MessageHeader(props MessageHeaderProps, content elements.Items) templ.Component

MessageHeader renders a Bulma `.message-header`. 

func Modal(props ModalProps, content elements.Items) templ.Component

Modal renders the root `.modal` container.

func ModalBackground 

func ModalBackground(props ModalBackgroundProps) templ.Component

ModalBackground renders the modal backdrop.

func ModalCard 

func ModalCard(props ModalCardProps, content elements.Items) templ.Component

ModalCard renders a Bulma `.modal-card`.

func ModalCardBody 

func ModalCardBody(props ModalCardBodyProps, content elements.Items) templ.Component

ModalCardBody renders the card modal body.

func ModalCardFoot 

func ModalCardFoot(props ModalCardFootProps, content elements.Items) templ.Component

ModalCardFoot renders the card modal footer.

func ModalCardHead 

func ModalCardHead(props ModalCardHeadProps, content elements.Items) templ.Component

ModalCardHead renders the card modal header.

func ModalClose 

func ModalClose(props ModalCloseProps) templ.Component

ModalClose renders a modal close button.

func ModalContent 

func ModalContent(props ModalContentProps, content elements.Items) templ.Component

ModalContent renders a Bulma `.modal-content`. 

func Navbar(props NavbarProps, content elements.Items) templ.Component

Navbar renders a Bulma `.navbar` container. 

func NavbarBrand(props NavbarBrandProps, content elements.Items) templ.Component

NavbarBrand renders a Bulma `.navbar-brand` container. 

func NavbarBurger(props NavbarBurgerProps) templ.Component

NavbarBurger renders a Bulma `.navbar-burger` button. 

func NavbarDivider(props NavbarDividerProps) templ.Component

NavbarDivider renders a Bulma `.navbar-divider`. 

func NavbarDropdown(props NavbarDropdownProps, content elements.Items) templ.Component

NavbarDropdown renders a Bulma `.navbar-dropdown` container. 

func NavbarEnd(props NavbarEndProps, content elements.Items) templ.Component

NavbarEnd renders a Bulma `.navbar-end` container. 

func NavbarItem(props NavbarItemProps, content elements.Items) templ.Component

NavbarItem renders a Bulma `.navbar-item` element. 

func NavbarLink(props NavbarLinkProps, content elements.Items) templ.Component

NavbarLink renders a Bulma `.navbar-link` element. 

func NavbarMenu(props NavbarMenuProps, content elements.Items) templ.Component

NavbarMenu renders a Bulma `.navbar-menu` container. 

func NavbarStart(props NavbarStartProps, content elements.Items) templ.Component

NavbarStart renders a Bulma `.navbar-start` container.

func Pagination 

func Pagination(props PaginationProps) templ.Component

Pagination renders the Bulma `.pagination` container.

func PaginationEllipsis 

func PaginationEllipsis() templ.Component

PaginationEllipsis — pagination separator. Atomic level: ATOM

PaginationEllipsis renders the `.pagination-ellipsis` element.

func PaginationItem 

func PaginationItem(content elements.Items) templ.Component

PaginationItem — list item wrapper. Atomic level: MOLECULE

PaginationItem renders a `<li>` element inside `.pagination-list`. 

func PaginationLink(props PaginationLinkProps, content elements.Items) templ.Component

PaginationLink renders a Bulma `.pagination-link`.

Active state MUST be controlled externally. Navigation behavior (href, disabled, JS handlers) MUST be provided via attributes.

func PaginationList 

func PaginationList(content elements.Items) templ.Component

PaginationList — page list container. Atomic level: MOLECULE

PaginationList renders the `.pagination-list` element.

The list is rendered only if content is provided.

func PaginationNext 

func PaginationNext(content elements.Items) templ.Component

PaginationNext — next page control. Atomic level: MOLECULE

PaginationNext renders the `.pagination-next` block.

The block is rendered only if content is provided. Absence MUST be represented by an empty Items list.

func PaginationPrev 

func PaginationPrev(content elements.Items) templ.Component

PaginationPrev — previous page control. Atomic level: MOLECULE

PaginationPrev renders the `.pagination-previous` block.

The block is rendered only if content is provided. Absence MUST be represented by an empty Items list.

func Panel 

func Panel(props PanelProps, content elements.Items) templ.Component

Panel renders the root `.panel` container.

func PanelBlock 

func PanelBlock(props PanelBlockProps, content elements.Items) templ.Component

PanelBlock renders a panel block.

func PanelHeading 

func PanelHeading(props PanelHeadingProps, content elements.Items) templ.Component

PanelHeading renders the panel heading.

func PanelTabs 

func PanelTabs(props PanelTabsProps, content elements.Items) templ.Component

PanelTabs renders panel tabs.

func Tabs 

func Tabs(props TabsProps, content elements.Items) templ.Component

Tabs renders the root `.tabs` container.

func TabsItem 

func TabsItem(props TabsItemProps, content elements.Items) templ.Component

TabsItem renders a tab item. 

func TabsLink(props TabsLinkProps, content elements.Items) templ.Component

TabsLink renders a clickable tab element.

func TabsList 

func TabsList(props TabsListProps, content elements.Items) templ.Component

TabsList renders the tabs list container.

Types 

type BreadcrumbIconProps struct {
	Icon elements.IconProps
}

BreadcrumbIcon — icon wrapper for breadcrumb items. Atomic level: ATOM

BreadcrumbIcon renders an icon inside a breadcrumb link.

This component is a thin wrapper around the Icon element and exists solely for semantic clarity. 

type BreadcrumbItemProps struct {
	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the `<li>` element.
	Attr templ.Attributes
}

BreadcrumbItem — breadcrumb list item. Atomic level: MOLECULE

BreadcrumbItem renders a `<li>` element.

Active state MUST be provided explicitly by the caller. This component does not infer current page. 

type BreadcrumbLinkProps struct {
	// Href defines the link URL.
	// When empty, no `href` attribute is rendered.
	Href string

	// Current applies `aria-current="page"`.
	Current bool

	// Attr contains additional HTML attributes
	// for the `<a>` element.
	Attr templ.Attributes
}

BreadcrumbLink — breadcrumb link element. Atomic level: ATOM

BreadcrumbLink renders an `<a>` element inside BreadcrumbItem.

This component does not assume navigation semantics. If `Href` is empty, the link is rendered without `href`.

Accessibility attributes (aria-current) MUST be provided explicitly via props. 

type BreadcrumbListProps struct {
	// Attr contains additional HTML attributes
	// for the `<ul>` element.
	Attr templ.Attributes
}

BreadcrumbList — breadcrumb list container. Atomic level: MOLECULE

BreadcrumbList renders the `<ul>` element inside Breadcrumb.

This component does not validate children and allows arbitrary ordering and composition of breadcrumb items. 

type BreadcrumbProps struct {
	// Separator defines the Bulma separator modifier.
	//
	// Examples:
	//   - has-arrow-separator
	//   - has-bullet-separator
	//   - has-dot-separator
	//   - has-succeeds-separator
	Separator string

	// Attr contains additional HTML attributes
	// for the `<nav>` element.
	Attr templ.Attributes
}

Breadcrumb — Bulma breadcrumb container. Atomic level: ORGANISM

Breadcrumb renders the root `.breadcrumb` navigation container.

This component is a pure structural container and does NOT:

  • infer active items
  • calculate navigation hierarchy
  • manage routing or application state
  • impose ordering of child elements

All structure, ordering, and active state MUST be composed explicitly by the caller using subcomponents.

type CardContentProps 

type CardContentProps struct {
	// Attr contains additional HTML attributes
	// for the `.card-content` container.
	Attr templ.Attributes
}

CardContent — main content area of Card. Atomic level: MOLECULE

CardContent is used to display the main content of Card.

type CardFooterItemProps 

type CardFooterItemProps struct {
	// Attr contains additional HTML attributes
	// for the `.card-footer-item` element.
	Attr templ.Attributes
}

CardFooterItem — item inside CardFooter. Atomic level: MOLECULE

CardFooterItem defines a single action or link inside CardFooter.

type CardFooterProps 

type CardFooterProps struct {
	// Attr contains additional HTML attributes
	// for the `.card-footer` container.
	Attr templ.Attributes
}

CardFooter — footer section of Card. Atomic level: MOLECULE

CardFooter displays actions or links at the bottom of Card.

type CardHeaderIconProps 

type CardHeaderIconProps struct {
	// Attr contains additional HTML attributes
	// for the `.card-header-icon` element.
	Attr templ.Attributes
}

CardHeaderIcon — icon/action inside CardHeader. Atomic level: MOLECULE

CardHeaderIcon is used for action buttons or icons in CardHeader.

type CardHeaderProps 

type CardHeaderProps struct {
	Attr templ.Attributes
}

CardHeader — header section of Card. Atomic level: MOLECULE

CardHeader defines the header container of a Card. It does NOT manage layout, actions, or state.

type CardHeaderTitleProps 

type CardHeaderTitleProps struct {
	// Attr contains additional HTML attributes
	// for the `.card-header-title` element.
	Attr templ.Attributes
}

CardHeaderTitle — title inside CardHeader. Atomic level: MOLECULE

CardHeaderTitle displays the title text in CardHeader.

type CardProps 

type CardProps struct {
	// Attr contains additional HTML attributes
	// for the `.card` container.
	Attr templ.Attributes
}

Card — Bulma card component. Atomic level: ORGANISM

Card defines composite UI component used to display grouped content such as articles, previews, or actions.

Card does not impose internal structure and must be composed explicitly using its subcomponents. 

type DropdownItemProps struct {
	// Href defines the link URL.
	// If empty, the item is treated as an action item.
	Href string

	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the item element.
	Attr templ.Attributes
}

DropdownItem renders a Bulma `.dropdown-item`. Atomic level: ATOM

DropdownItem is always rendered as an <a> element. If Href is empty, the item is treated as an action item and can be handled via JS/Alpine. 

type DropdownMenuProps struct {
	// Attr contains additional HTML attributes
	// for the `.dropdown-menu` container.
	Attr templ.Attributes
}

DropdownMenu renders `.dropdown-menu` and `.dropdown-content`. Atomic level: MOLECULE

DropdownMenu wraps dropdown items and does not manage state. 

type DropdownProps struct {
	// Active applies the `is-active` modifier.
	Active bool

	// Hoverable enables hover-based activation (`is-hoverable`).
	Hoverable bool

	// Right aligns the dropdown menu to the right (`is-right`).
	Right bool

	// Up opens the dropdown upwards (`is-up`).
	Up bool

	// Attr contains additional HTML attributes
	// for the `.dropdown` container.
	Attr templ.Attributes
}

Dropdown renders a Bulma `.dropdown` component. Atomic level: ORGANISM

Dropdown defines composite UI component used to display contextual menus. It does not manage state or behavior; state must be controlled externally (e.g. via Alpine.js). 

type DropdownTriggerProps struct {
	// Attr contains additional HTML attributes
	// for the `.dropdown-trigger` container.
	Attr templ.Attributes
}

DropdownTrigger renders `.dropdown-trigger`. Atomic level: MOLECULE

DropdownTrigger is used to render the trigger element (button, link, etc.) that controls the dropdown state. 

type MenuItemProps struct {
	// Href defines the link URL.
	// If empty, the item is treated as an action item.
	Href string

	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the <a> element.
	Attr templ.Attributes
}

MenuItem renders a Bulma-compatible menu item. Atomic level: ATOM

MenuItem is always rendered as an <a> element. Active state is controlled externally. 

type MenuLabelProps struct {
	// Attr contains additional HTML attributes
	// for the `.menu-label` element.
	Attr templ.Attributes
}

MenuLabel renders a Bulma `.menu-label`. Atomic level: MOLECULE

MenuLabel is used to display section headers inside Menu. 

type MenuListProps struct {
	// Attr contains additional HTML attributes
	// for the `.menu-list` container.
	Attr templ.Attributes
}

MenuList renders a Bulma `.menu-list`. Atomic level: MOLECULE

MenuList wraps menu items and supports nested lists via standard <ul> nesting. 

type MenuProps struct {
	// Attr contains additional HTML attributes
	// for the `.menu` container.
	Attr templ.Attributes
}

Menu renders a Bulma `.menu` component. Atomic level: ORGANISM

Menu is used for vertical navigation and grouped links. It does not manage state or impose internal structure.

type MessageBodyProps 

type MessageBodyProps struct {
	// Attr contains additional HTML attributes
	// for the `.message-body` container.
	Attr templ.Attributes
}

MessageBody renders the body section of Message. Atomic level: MOLECULE

MessageBody is used to display the main message content.

type MessageHeaderProps 

type MessageHeaderProps struct {
	// Attr contains additional HTML attributes
	// for the `.message-header` container.
	Attr templ.Attributes
}

MessageHeader renders the header section of Message. Atomic level: MOLECULE

MessageHeader is used to display the message title and optional controls (e.g. delete button).

type MessageProps 

type MessageProps struct {
	// Color defines the Bulma color modifier
	// (is-info, is-success, is-warning, is-danger).
	Color string

	// Attr contains additional HTML attributes
	// for the `.message` container.
	Attr templ.Attributes
}

Message renders a Bulma `.message` component. Atomic level: ORGANISM

Message is used to display informational, success, warning, or error messages. It does not manage state or closing behavior.

type ModalBackgroundProps 

type ModalBackgroundProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-background` element.
	Attr templ.Attributes
}

ModalBackground renders `.modal-background`. Atomic level: MOLECULE

ModalBackground is typically used to darken the background and capture click events to close the modal.

type ModalCardBodyProps 

type ModalCardBodyProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-card-body` container.
	Attr templ.Attributes
}

ModalCardBody renders `.modal-card-body`. Atomic level: MOLECULE

Used for the main content of a card-style modal.

type ModalCardFootProps 

type ModalCardFootProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-card-foot` container.
	Attr templ.Attributes
}

ModalCardFoot renders `.modal-card-foot`. Atomic level: MOLECULE

Typically contains action buttons.

type ModalCardHeadProps 

type ModalCardHeadProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-card-head` container.
	Attr templ.Attributes
}

ModalCardHead renders `.modal-card-head`. Atomic level: MOLECULE

Typically contains the title and close button.

type ModalCardProps 

type ModalCardProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-card` container.
	Attr templ.Attributes
}

ModalCard renders `.modal-card`. Atomic level: MOLECULE

ModalCard is used for the card-style modal layout.

type ModalCloseProps 

type ModalCloseProps struct {
	// Size defines the close button size
	// (is-small, is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the close button.
	Attr templ.Attributes
}

ModalClose renders `.modal-close` button. Atomic level: MOLECULE

ModalClose is used in the simple modal variant. Closing behavior must be implemented externally.

type ModalContentProps 

type ModalContentProps struct {
	// Attr contains additional HTML attributes
	// for the `.modal-content` container.
	Attr templ.Attributes
}

ModalContent renders `.modal-content`. Atomic level: MOLECULE

ModalContent is used in the simple (non-card) modal variant.

type ModalProps 

type ModalProps struct {
	// Active applies the `is-active` modifier.
	// Useful for server-side controlled modals.
	Active bool

	// Attr contains additional HTML attributes
	// for the `.modal` container.
	// Commonly used for x-data, x-show, aria-*, data-*.
	Attr templ.Attributes
}

Modal renders a Bulma `.modal` component. Atomic level: ORGANISM

Modal defines the root container for modal dialogs. It is responsible only for structure and CSS modifiers. Open / close state must be managed externally. 

type NavbarBrandProps struct {
	// Attr contains additional HTML attributes
	// for the `.navbar-brand` container.
	Attr templ.Attributes
}

NavbarBrand — brand section of Navbar. Atomic level: MOLECULE

NavbarBrand typically contains the logo and burger button. 

type NavbarBurgerProps struct {
	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the `.navbar-burger` element.
	Attr templ.Attributes
}

NavbarBurger — burger button for mobile navigation. Atomic level: MOLECULE

NavbarBurger controls the visibility of NavbarMenu. Behavior must be implemented externally. 

type NavbarDividerProps struct {
	Attr templ.Attributes
}

NavbarDivider — visual divider inside NavbarDropdown. Atomic level: MOLECULE 

type NavbarDropdownProps struct {
	// Right applies the `is-right` modifier.
	Right bool

	// Attr contains additional HTML attributes
	// for the `.navbar-dropdown` container.
	Attr templ.Attributes
}

NavbarDropdown — dropdown menu inside Navbar. Atomic level: MOLECULE 

type NavbarEndProps struct {
	Attr templ.Attributes
}

NavbarEnd — right-aligned menu section. Atomic level: MOLECULE 

type NavbarItemProps struct {
	// Href defines the link target.
	// If empty, renders a <div>; if set, renders an <a>.
	Href string

	// Tab applies the `is-tab` modifier for tab-like styling.
	Tab bool

	// Active applies the `is-active` modifier.
	Active bool

	// Hoverable applies the `is-hoverable` modifier.
	Hoverable bool

	// Attr contains additional HTML attributes
	// for the `.navbar-item` element.
	Attr templ.Attributes
}

NavbarItem — individual item in navbar (link, div, or dropdown trigger). Atomic level: ATOM

NavbarItem represents a `.navbar-item` element. Can be a link (<a>), div (<div>), or dropdown trigger. 

type NavbarLinkProps struct {
	// Arrowless removes the dropdown arrow indicator.
	Arrowless bool

	// Attr contains additional HTML attributes
	// for the `.navbar-link` element.
	Attr templ.Attributes
}

NavbarLink — clickable dropdown trigger inside navbar-item. Atomic level: ATOM

NavbarLink represents a `.navbar-link` element. Used as dropdown trigger with is-arrowless modifier support. 

type NavbarMenuProps struct {
	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the `.navbar-menu` container.
	Attr templ.Attributes
}

NavbarMenu — collapsible menu section. Atomic level: MOLECULE

NavbarMenu defines the structural container for navbar items. It does NOT manage visibility, animation, or interaction logic. 

type NavbarProps struct {
	// Color defines the Bulma color modifier
	// (is-primary, is-dark, is-light, etc.).
	Color string

	// Transparent applies the `is-transparent` modifier.
	Transparent bool

	// Fixed defines fixed positioning
	// (is-fixed-top or is-fixed-bottom).
	Fixed string

	// Attr contains additional HTML attributes
	// for the `.navbar` container.
	Attr templ.Attributes
}

Navbar — Bulma navbar layout component. Atomic level: ORGANISM

Navbar provides the main site navigation structure. It does NOT manage state, burger behavior, or dropdown logic. 

type NavbarStartProps struct {
	Attr templ.Attributes
}

NavbarStart — left-aligned menu section. Atomic level: MOLECULE

type PaginationLinkProps 

type PaginationLinkProps struct {

	// Active indicates whether the link is active.
	Active bool

	// Attr contains additional HTML attributes
	// for the link element.
	Attr templ.Attributes
}

type PaginationProps 

type PaginationProps struct {
	// Content defines ordered pagination blocks.
	//
	// Supported blocks include:
	//   - PaginationPrev
	//   - PaginationNext
	//   - PaginationList
	//
	// Order is significant and MUST be defined explicitly.
	Content elements.Items

	// Size defines the pagination size modifier
	// (is-small, is-medium, is-large).
	Size string

	// Alignment defines pagination alignment modifier
	// (is-centered, is-right).
	Alignment string

	// Rounded applies the `is-rounded` modifier.
	Rounded bool

	// Attr contains additional HTML attributes
	// for the root `.pagination` container.
	Attr templ.Attributes
}

Pagination — Bulma pagination container. Atomic level: ORGANISM

Pagination renders the root `.pagination` element.

This component is a pure structural container and does NOT:

  • calculate page ranges
  • decide which blocks are rendered
  • enforce ordering of child blocks

All pagination blocks MUST be provided explicitly via the Content field and rendered in the exact order defined by the caller.

This design matches Bulma documentation, where `.pagination-previous`, `.pagination-next`, and `.pagination-list` may appear in any order.

type PanelBlockProps 

type PanelBlockProps struct {
	// Href defines the link URL.
	// If empty, the block is rendered as a <div>.
	Href string

	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the `.panel-block` element.
	Attr templ.Attributes
}

PanelBlock renders Bulma `.panel-block`. Atomic level: MOLECULE

PanelBlock can be rendered as a link (<a>) or as a container (<div>) depending on the presence of Href.

type PanelHeadingProps 

type PanelHeadingProps struct {
	// Attr contains additional HTML attributes
	// for the `.panel-heading` element.
	Attr templ.Attributes
}

PanelHeading renders a Bulma `.panel-heading`. Atomic level: MOLECULE

PanelHeading is used to display the panel title.

type PanelProps 

type PanelProps struct {
	// Attr contains additional HTML attributes
	// for the `.panel` container.
	Attr templ.Attributes
}

Panel renders a Bulma `.panel` component. Atomic level: ORGANISM

Panel is used to group related content and actions. It defines structural component and does not manage state.

type PanelTabsProps 

type PanelTabsProps struct {
	// Attr contains additional HTML attributes
	// for the `.panel-tabs` container.
	Attr templ.Attributes
}

PanelTabs renders Bulma `.panel-tabs`. Atomic level: MOLECULE

PanelTabs is used to display tab navigation inside Panel.

type TabsItemProps 

type TabsItemProps struct {
	// Active applies the `is-active` modifier.
	Active bool

	// Attr contains additional HTML attributes
	// for the <li> element.
	Attr templ.Attributes
}

TabsItem renders a single tab item. Atomic level: MOLECULE

Active state is applied on the <li> element according to Bulma conventions.

type TabsLinkProps 

type TabsLinkProps struct {
	// Href defines the tab link URL.
	// If empty, TabsLink is rendered as a non-navigational interactive element.
	Href string

	// Attr contains additional HTML attributes
	// for the <a> element.
	Attr templ.Attributes
}

TabsLink renders an interactive tab link. Atomic level: ATOM

TabsLink is used inside TabsItem to provide correct UX (cursor, hover, focus) as per Bulma docs. It does not manage tab state.

type TabsListProps 

type TabsListProps struct {
	// Attr contains additional HTML attributes
	// for the <ul> element.
	Attr templ.Attributes
}

TabsList — tabs list container. Atomic level: MOLECULE

TabsList defines the structural <ul> wrapper inside Tabs. It does NOT manage active state or navigation behavior.

type TabsProps 

type TabsProps struct {
	// Centered applies the `is-centered` modifier.
	Centered bool

	// Right applies the `is-right` modifier.
	Right bool

	// Boxed applies the `is-boxed` modifier.
	Boxed bool

	// Toggle applies the `is-toggle` modifier.
	Toggle bool

	// ToggleRounded applies the `is-toggle-rounded` modifier.
	ToggleRounded bool

	// Fullwidth applies the `is-fullwidth` modifier.
	Fullwidth bool

	// Size defines the tabs size
	// (is-small, is-medium, is-large).
	Size string

	// Attr contains additional HTML attributes
	// for the `.tabs` container.
	Attr templ.Attributes
}

Tabs renders a Bulma `.tabs` component. Atomic level: ORGANISM

Tabs is used for navigation between sections. It defines structural component and does not manage active state.

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.