DevactionUI.Segmented (devaction_ui v0.2.3)

Copy Markdown View Source

A control to pick one of a few options that change the view at once (list or board, week or month): a pill with a segment per option. It is a group of toggle buttons with aria-pressed; the caller keeps the value and learns of a choice through event (phx-value-value). A segment can have an icon, a count, or only an icon (the label is then read by assistive technology). full stretches it to the width of its box. An option can be disabled, take its own class, and send patch or navigate (a path) instead of the event, for a filter that lives in the URL.

The segments stay toggle buttons with aria-pressed; the DevactionUI.Segmented hook only eases the keyboard: one segment is in the Tab order (the pressed one, or the first that is not disabled) and the arrow keys, Home and End move the focus round the others, skipping disabled ones. Moving the focus does not choose: Enter or Space presses, as for any button.

The segments are 34px high (:md) and 28px (:sm), as the canvas draws them: on a touch screen give the control room around it or use :md with full.

Summary

Functions

segmented(assigns)

Attributes

  • id (:string) (required)
  • label (:string) (required) - what the control chooses, for assistive technology.
  • value (:string) (required) - the value of the chosen option.
  • event (:string) - the event sent with value when an option is pressed; an option with patch or navigate sends none. Defaults to nil.
  • size (:atom) - Defaults to :md. Must be one of :sm, or :md.
  • full (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • option (required) - Accepts attributes:
    • value (:string) (required)
    • label (:string) (required)
    • count (:any)
    • icon_only (:boolean)
    • tag (:string) - a small note on the segment, such as a discount.
    • disabled (:boolean)
    • class (:any)
    • patch (:string) - a path to patch to instead of sending the event.
    • navigate (:string) - a path to navigate to instead of sending the event.
  • icon - the icon of an option; gets %{value: option value}.