DevactionUI.Switch (devaction_ui v0.1.0)

Copy Markdown View Source

A switch for what takes effect at once, with no save button (for a choice that only counts after saving, use a checkbox). It is a <button role="switch">: aria-checked says the state, the keyboard toggles it and the caller does the work in its own phx-click. While the change is being kept, saving makes the thumb pulse and the control ignore presses; saved_note/1 is the "saved now" the caller shows after.

Colors: the default ink, :ai (amber) and :ok (green). Sizes: :sm, :md, :lg.

Summary

Functions

saved_note(assigns)

The confirmation of a change that was kept, read out by assistive technology without taking focus.

switch(assigns)
switch_card(assigns)

A card that is the switch: it gets the border and the wash of "on" when the switch is on.

switch_row(assigns)

A row of settings: the label and its description on the left, the switch on the right.

Functions

saved_note(assigns)

The confirmation of a change that was kept, read out by assistive technology without taking focus.

Attributes

  • id (:string) (required)
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the confirmation, such as "Saved now".
  • icon

switch(assigns)

Attributes

  • id (:string) (required)
  • checked (:boolean) - Defaults to false.
  • size (:atom) - Defaults to :md. Must be one of :sm, :md, or :lg.
  • tone (:atom) - Defaults to :default. Must be one of :default, :ai, or :ok.
  • saving (:boolean) - the change is being kept: the thumb pulses and presses are ignored. Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • label (:string) - the accessible name when there is no visible one. Defaults to nil.
  • labelledby (:string) - the id of the text that names it. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id", "phx-value-key", "phx-target"].

switch_card(assigns)

A card that is the switch: it gets the border and the wash of "on" when the switch is on.

Attributes

  • id (:string) (required)
  • checked (:boolean) - Defaults to false.
  • label (:string) (required)
  • description (:string) - Defaults to nil.
  • tone (:atom) - Defaults to :default. Must be one of :default, :ai, or :ok.
  • saving (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id", "phx-value-key", "phx-target"].

Slots

  • icon - a mark at the start of the card.

switch_row(assigns)

A row of settings: the label and its description on the left, the switch on the right.

Attributes

  • id (:string) (required)
  • checked (:boolean) - Defaults to false.
  • label (:string) (required)
  • description (:string) - Defaults to nil.
  • tone (:atom) - Defaults to :default. Must be one of :default, :ai, or :ok.
  • saving (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id", "phx-value-key", "phx-target"].