DevactionUI.FilterPill (devaction_ui v0.2.3)

Copy Markdown View Source

The round pills of a filter bar: on or off, with a ×, and the dashed one that adds a filter.

filter_pill/1 is a filter that is on or off (active fills it with ink; tone={:warn} is the amber one for what needs a look) and, with remove_event, carries a × that takes it away; add_pill/1 is the dashed "+ Filter" that opens the choice of a new one. They are the canvas's "pills com estado".

A pill is a toggle button with aria-pressed; the caller keeps the state and learns of a press through event (phx-value-value, the value or the label). The × is a second button named by remove_label, where %{label} is the text of the pill, so a screen reader hears "Remove SGE" and not N equal buttons. For the field where the person types the pills, see DevactionUI.Pillbox.

Summary

Functions

add_pill(assigns)
filter_pill(assigns)

Functions

add_pill(assigns)

Attributes

  • label (:string) (required) - what it adds, such as "Filter".
  • event (:string) - sent when the pill is pressed. Defaults to nil.
  • target (:any) - a phx-target (a @myself) inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - replaces the typographic + before the label.

filter_pill(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • label (:string) (required)
  • value (:string) - sent as phx-value-value; the label when not given. Defaults to nil.
  • active (:boolean) - the filter is on: filled with ink. Defaults to false.
  • tone (:atom) - the look of an inactive pill; :warn is the amber one. Defaults to :neutral. Must be one of :neutral, or :warn.
  • event (:string) - sent when the pill is pressed. Defaults to nil.
  • remove_event (:string) - shows the × and is sent when it is pressed. Defaults to nil.
  • remove_label (:string) - names the ×, as in "Remove %{label}"; required with remove_event. Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - a mark before the label.
  • remove_icon - replaces the typographic × that removes the pill.