DevactionUI.Separator (devaction_ui v0.2.3)

Copy Markdown View Source

A hairline that separates, in three forms: the plain line (separator/1), the line with a short text in the middle, such as the one between a social sign-in and a form (separator/1 with label), and an inline row of small facts divided by vertical bars (inline/1). Any of them can stand upright with orientation: :vertical.

A plain line is a separator for assistive technology. The text of a labelled one is its accessible name, so it is read once; the lines on each side are decoration. The bars of inline/1 are decoration too: the facts stay one after the other. Pass decorative when the line only adorns and no reader needs to know it is there.

The library knows no language: the text is the caller's.

Summary

Functions

A row of small facts divided by vertical bars.

A hairline, plain or with a text in the middle, horizontal or vertical.

Functions

inline(assigns)

@spec inline(map()) :: Phoenix.LiveView.Rendered.t()

A row of small facts divided by vertical bars.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - one fact; a bar is drawn between two items.

separator(assigns)

@spec separator(map()) :: Phoenix.LiveView.Rendered.t()

A hairline, plain or with a text in the middle, horizontal or vertical.

Attributes

  • orientation (:atom) - Defaults to :horizontal. Must be one of :horizontal, or :vertical.
  • label (:string) - the text in the middle of a horizontal line, such as or continue with. Defaults to nil.
  • decorative (:boolean) - hidden from assistive technology, for a line that only adorns. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.