PetalComponents.Showcase.Frame (petal_components v4.6.0)

Copy Markdown View Source

The shared presentation shell for showcase examples - the piece that makes the dev playground and petal.build render example blocks identically.

showcase_example/1 joins a live preview to a collapsible, syntax-highlighted code panel with a copy button. The collapse toggle is pure CSS (a hidden checkbox + :has() rules in default.css) so it needs no Alpine and no hook and works in dead views. Code is highlighted server-side via the optional mdex + lumis stack (same as the chat), falling back to plain <pre> markup when they are absent.

showcase_props/1 renders a component's attrs/slots table straight from Phoenix.Component.__components__/0, so props documentation can never drift.

Summary

Functions

showcase_example(assigns)

Renders one showcase example: preview panel + collapsible code panel.

showcase_props(assigns)

Renders a component's attributes and slots as a table (one per function), straight from Phoenix.Component.__components__/0 - so props docs can never drift from the component's real API. Pass function for a single-function component, or functions for a multi-function one (chat, command).

Functions

showcase_example(assigns)

Renders one showcase example: preview panel + collapsible code panel.

Attributes

  • example (PetalComponents.Showcase.Example) (required)
  • id (:string) - DOM id for the frame; defaults to one derived from the example id. Set it if the same example renders twice on one page. Defaults to nil.
  • locked (:boolean) - blur the code behind a login CTA (the surface decides). Defaults to false.
  • show_code (:boolean) - Defaults to true.
  • content_left (:boolean) - left-align the preview instead of centering it. Defaults to false.
  • class (:any) - Defaults to nil.

Slots

  • locked_overlay - shown over the blurred code when locked; defaults to a lock hint.

showcase_props(assigns)

Renders a component's attributes and slots as a table (one per function), straight from Phoenix.Component.__components__/0 - so props docs can never drift from the component's real API. Pass function for a single-function component, or functions for a multi-function one (chat, command).

Attributes

  • component (:atom) (required) - the component module, e.g. PetalComponents.Chat.
  • function (:atom) - a single component function, e.g. :border_beam. Defaults to nil.
  • functions (:list) - several functions to document (one table each) - for multi-function components like chat. Defaults to nil.
  • class (:any) - Defaults to nil.