DevactionUI.DescriptionList (devaction_ui v0.2.3)

Copy Markdown View Source

A list of terms and their values, one row each, with a hairline between the rows: the facts of a client, a repository, a pull request. It is a real description list (<dl> with a <dt> and a <dd> per row), so a screen reader announces each value with its term.

Each item slot is a row: label is the term (muted), the slot content is the value (medium weight). An item with href makes its value a link; tone colors the value (:ok, :warn, :risk, :info) and mono sets it in the monospace of a repository or a hash. term_width is the width of the term column; layout: :stacked puts the term over the value instead, for a narrow card.

Summary

Functions

Term and value rows in a <dl>, with hairlines between them.

Functions

list(assigns)

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

Term and value rows in a <dl>, with hairlines between them.

Attributes

  • layout (:atom) - the term beside the value, or over it. Defaults to :inline. Must be one of :inline, or :stacked.
  • term_width (:string) - the width of the term column when layout is :inline, as a CSS length. Defaults to "120px".
  • divided (:boolean) - a hairline between the rows. Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - a row: the slot content is the value. Accepts attributes:
    • label (:string) (required) - the term.
    • href (:string) - makes the value a link.
    • tone (:atom) - colors the value: :ok, :warn, :risk, :info.
    • mono (:boolean) - sets the value in the monospace.