PhiaUi.Components.Typography.Leader (phia_ui v0.1.17)

Copy Markdown View Source

Dot/dash leader fill between two inline elements.

Leaders are the horizontal fill characters (typically dots) that connect a label on the left to a value on the right — commonly seen in restaurant menus, tables of contents, and pricing lists.

Examples

<.leader>
  <:leading>Chapter 1</:leading>
  <:trailing>1</:trailing>
</.leader>

<.leader fill={:dash}>
  <:leading>Espresso</:leading>
  <:trailing>$3.50</:trailing>
</.leader>

Fill styles

FillBorder style
:dotborder-dotted (default)
:dashborder-dashed
:lineborder-solid
:spaceborder-transparent (invisible)

Summary

Functions

leader(assigns)

Renders a leader fill between leading and trailing content.

Functions

leader(assigns)

Renders a leader fill between leading and trailing content.

Attributes

  • fill (:atom) - Leader fill style. Defaults to :dot. Must be one of :dot, :dash, :line, or :space.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div>.

Slots

  • leading (required) - Left-side content (label, chapter title).
  • trailing (required) - Right-side content (price, page number).