DevactionUI.Badge (devaction_ui v0.2.3)

Copy Markdown View Source

Three small signals: count/1, the round bubble with a number (4 pull requests waiting), dot/1, the status dot (connected, reviewing) and chip/1, the pill with a small avatar and a name. A dot can pulse, and stops under prefers-reduced-motion; it is drawn in the brighter dot shade of its tone.

Summary

Functions

chip(assigns)

A pill with a small avatar and a name, for a person assigned to something.

count(assigns)
dot(assigns)

Functions

chip(assigns)

A pill with a small avatar and a name, for a person assigned to something.

Attributes

  • initials (:string) - the letters in the small avatar; ignored when the avatar slot is given. Defaults to nil.
  • tone (:atom) - the tint of the small avatar. Defaults to :indigo. Must be one of :indigo, :emerald, :risk, :warn, :ok, :info, or :neutral.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • avatar - replaces the initials, drawn by the caller in a 22 px circle.
  • inner_block (required) - the name.

count(assigns)

Attributes

  • value (:integer) (required)
  • max (:integer) - above this the bubble reads 99+. Defaults to 99.
  • tone (:atom) - Defaults to :neutral. Must be one of :neutral, or :risk.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

dot(assigns)

Attributes

  • tone (:atom) - Defaults to :ok. Must be one of :ok, :warn, :risk, :info, :neutral, :indigo, or :emerald.
  • pulse (:boolean) - Defaults to false.
  • label (:string) - what the dot says, for assistive technology; without it the dot is decoration. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.