PtahUi.Components.Swap (PtahUI v0.1.0)

Copy Markdown View Source

Swap — toggles visibility between two (or three) child elements using a hidden checkbox.

Clicking anywhere on the component toggles the active state client-side. Pass phx-change / name via :rest to sync state with the server.

Examples

<%!-- Text swap --%>
<.swap>
  <:on>ON</:on>
  <:off>OFF</:off>
</.swap>

<%!-- Icon swap with rotate effect --%>
<.swap effect="rotate">
  <:on><.icon name="hero-sun" class="w-6 h-6" /></:on>
  <:off><.icon name="hero-moon" class="w-6 h-6" /></:off>
</.swap>

<%!-- Controlled by server --%>
<.swap checked={@dark_mode} phx-change="toggle_theme" name="dark_mode">
  <:on><.icon name="hero-sun" class="w-6 h-6" /></:on>
  <:off><.icon name="hero-moon" class="w-6 h-6" /></:off>
</.swap>

Summary

Functions

swap(assigns)

Functions

swap(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • checked (:boolean) - Initial active state. Defaults to false.
  • effect (:string) - Visual transition effect when toggling. Defaults to "none".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "name", "value", "form", "disabled"].

Slots

  • on (required) - Content shown when the swap is active (checkbox checked).
  • off (required) - Content shown when the swap is inactive (checkbox unchecked).
  • indeterminate - Content shown when indeterminate (requires setting input.indeterminate=true via JS).