DevactionUI.Stat (devaction_ui v0.2.3)

Copy Markdown View Source

A number with its name: the mono caption over a large value, then a line below with a small trend tag and a hint. By default it is a bordered card (bordered); highlight is the inverted version, white on ink, for the one number a screen is about. The value is the slot, and its unit (%, /12, k) sits beside it in the muted 24px of the canvas.

The label and the value are a <dl> pair, so assistive technology reads them together. The label is drawn in capitals by CSS (uppercase), the text itself is yours.

Summary

Functions

A captioned number.

Functions

stat(assigns)

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

A captioned number.

Attributes

  • label (:string) (required) - the caption over the value.
  • tone (:atom) - the tone of the value; :default is plain ink. Defaults to :default. Must be one of :default, :risk, :warn, :ok, :info, or :neutral.
  • highlight (:boolean) - the inverted card, white on ink. Defaults to false.
  • bordered (:boolean) - the 1px card around it (not drawn when highlight). Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the value.
  • unit - what the value is counted in, muted beside it.
  • trend - a small tag on the line below the value.
  • hint - a muted line of support on the line below the value.