DevactionUI.Switch (devaction_ui v0.2.3)

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. By default it writes no hidden input, so it does not take part in a form's submit: the state is the LiveView's, kept by the click. Give it a name (the field mode) and it renders a hidden input <id>-field with "true" or "false", which the DevactionUI.Switch hook keeps the same as the button, firing input so the form's phx-change hears it; a press then works with no phx-click at all. While the change is being kept, saving puts a spinner in the thumb and the control ignores 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. The track has a hit area of 44px high; in switch_row/1 and switch_card/1 the text is a <label>, so pressing it toggles too.

Summary

Functions

The confirmation of a change that was kept, read out by assistive technology without taking focus. Render it always and flip show.

The switch itself, a button that takes the press and says its state.

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

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

Functions

saved_note(assigns)

The confirmation of a change that was kept, read out by assistive technology without taking focus. Render it always and flip show.

Attributes

  • id (:string) (required)
  • show (:boolean) - whether the band with the text is there; the live region itself always is, so the text is announced when it comes in. Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

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

switch(assigns)

The switch itself, a button that takes the press and says its state.

Attributes

  • id (:string) (required)
  • checked (:boolean) - Defaults to false.
  • name (:string) - turns on the field mode: a hidden input of this name carries "true" or "false" in the form. Defaults to nil.
  • 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: a spinner shows in the thumb 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"].

Slots

  • icon - a mark in the thumb, coloured by the tone (a check when on, a cross when off); gets %{checked: boolean}.

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.
  • name (:string) - the field mode of switch/1. Defaults to nil.
  • 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 in a 40px badge at the start of the card; it takes the colour of "on".
  • thumb_icon - a mark in the thumb, as the icon of switch/1.

switch_row(assigns)

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

Attributes

  • id (:string) (required)
  • checked (:boolean) - Defaults to false.
  • name (:string) - the field mode of switch/1. Defaults to nil.
  • 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

  • thumb_icon - a mark in the thumb, as the icon of switch/1.