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
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 withvaluewhen an option is pressed; an option withpatchornavigatesends none. Defaults tonil.size(:atom) - Defaults to:md. Must be one of:sm, or:md.full(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.target(:any) - aphx-target(a@myself) when used inside a LiveComponent. Defaults tonil.- 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}.