PhiaUi.Components.Layout.Box (phia_ui v0.1.17)

Copy Markdown View Source

Semantic HTML wrapper component with configurable element tag.

box renders any HTML element specified via the :as attribute, defaulting to div. Use it to add semantic meaning (article, section, aside, main) to a container without losing access to PhiaUI's class merger.

Examples

<.box>content</.box>

<.box as="article" class="p-4 rounded-lg border border-border">
  Card-like article
</.box>

<.box as="main" class="flex-1 overflow-auto">
  Main content area
</.box>

<.box as="aside" class="w-64 shrink-0">
  Sidebar
</.box>

Summary

Functions

box(assigns)

Renders a semantic HTML wrapper with a configurable tag.

Functions

box(assigns)

Renders a semantic HTML wrapper with a configurable tag.

Attributes

  • as (:string) - HTML element to render as. Defaults to "div". Must be one of "div", "section", "article", "main", "aside", "header", "footer", "span", "p", "ul", "ol", "li", "nav", or "figure".
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block (required) - Content rendered inside the element.