LineaUI.Components.Steps (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's steps: numbered or plain points joined by a line, horizontal or vertical.

<.steps>
  <:step label="Cart">1</:step>
  <:step label="Shipping">2</:step>
  <:step label="Payment">3</:step>
</.steps>

<.steps color="primary" orientation="vertical" line_space>
  <:step label="Ordered">1</:step>
  <:step label="Shipped">2</:step>
</.steps>

<.steps size="xs" line_space>
  <:step label="Done" color="primary" />
  <:step label="Now" color="secondary" ping />
  <:step label="Next" />
</.steps>

color paints every point and the line between them; a step's own color paints only its point. The content of a step is what its point shows (a number, an icon or nothing).

Summary

Functions

steps(assigns)

Renders a list of steps. Each :step is a point (showing the slot's content) with an optional label under it, or beside it when vertical.

Functions

steps(assigns)

Renders a list of steps. Each :step is a point (showing the slot's content) with an optional label under it, or beside it when vertical.

<.steps color="primary">
  <:step label="Cart">1</:step>
  <:step label="Shipping" current>2</:step>
  <:step label="Payment">3</:step>
</.steps>

Attributes

  • color (:string) - Paints every point and the line between them. Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".
  • orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • size (:string) - xs and sm are bare dots with small labels. Defaults to "md". Must be one of "xs", "sm", "md", or "lg".
  • line_space (:boolean) - Leaves a gap between the points and the line. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • step (required) - One step; its content is what the point shows. Accepts attributes:
    • label (:string) - The text under (or beside) the point.
    • color (:string) - The color of this step's point.
    • ping (:boolean) - A pulsing ring around the point.
    • current (:boolean) - Marks the step as the current one (aria-current).
    • class (:any)