Corex.ToggleGroup (Corex v0.1.0-alpha.24)

View Source

Phoenix implementation of Zag.js Toggle Group.

Minimal

  <.toggle_group
      class="toggle-group">
      <:item value="a">
          A
      </:item>
      <:item value="b">
          B
      </:item>
      <:item value="c">
          C
      </:item>
    </.toggle_group>

Extended

This example assumes the import of .icon from Core Components


    <.toggle_group multiple={false}
    on_value_change="on_value_change"
    id="toggle-group-id"
    value=["center"]
    class="toggle-group">
    <:item value="left">
     <.icon name="hero-bars-3-bottom-left" />
    </:item>
    <:item value="center">
    <.icon name="hero-bars-3" />
    </:item>
    <:item value="right">
    <.icon name="hero-bars-3-bottom-right" />
    </:item>
  </.toggle_group>

Controlled

defmodule MyAppWeb.ToggleGroupLive do
use MyAppWeb, :live_view

def mount(_params, _session, socket) do
  {:ok, assign(socket, :value, ["lorem"])}
end

def handle_event("on_value_change", %{"value" => value}, socket) do
  {:noreply, assign(socket, :value, value)}
end

def render(assigns) do
  ~H"""
 <.toggle_group
      class="toggle-group"
      controlled
      value={@value} on_value_change="on_value_change" >
      <:item value="a">
          A
      </:item>
      <:item value="b">
          B
      </:item>
      <:item value="c">
          C
      </:item>
    </.toggle_group>
"""
end
end

Programmatic Control

Client-side

<button phx-click={Corex.ToggleGroup.set_value("my-toggle-group", ["item-1"])}>
  Toggle Group Item 1
</button>

Server-side

def handle_event("open_item", _, socket) do
  {:noreply, Corex.ToggleGroup.set_value(socket, "my-toggle-group", ["item-1"])}
end

## Styling

Use data attributes to target elements: - [data-scope="toggle-group"][data-part="root"] - Container - [data-scope="toggle-group"][data-part="item"] - Item wrapper

If you wish to use the default Corex styling, you can use the class toggle-group on the component. This requires to install mix corex.design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/toggle-group.css";

You can then use modifiers

<.toggle_group class="toggle-group toggle-group--accent toggle-group--lg">

Learn more about modifiers and Corex Design

Summary

Components

toggle_group(assigns)

Renders a toggle group component.

API

set_value(toggle_group_id, value)

Sets the toggle group value from client-side. Returns a Phoenix.LiveView.JS command.

set_value(socket, toggle_group_id, value)

Sets the toggle group value from server-side. Pushes a LiveView event.

Components

toggle_group(assigns)

Renders a toggle group component.

Attributes

  • id (:string) - The id of the toggle group, useful for API to identify the toggle group.
  • value (:list) - The initial value or the controlled value of the toggle group, must be a list of strings. Defaults to [].
  • controlled (:boolean) - Whether the toggle group is controlled. Defaults to false.
  • deselectable (:boolean) - Whether the toggle group is deselectable. Defaults to false.
  • loopFocus (:boolean) - Whether the toggle group is loopFocus. Defaults to true.
  • rovingFocus (:boolean) - Whether the toggle group is rovingFocus. Defaults to true.
  • disabled (:boolean) - Whether the toggle group is disabled. Defaults to false.
  • multiple (:boolean) - Whether the toggle group allows multiple items to be selected. Defaults to true.
  • orientation (:string) - The orientation of the toggle group. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • dir (:string) - The direction of the toggle group. When nil, derived from document (html lang + config :rtl_locales). Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • on_value_change (:string) - The server event name when the value change. Defaults to nil.
  • on_value_change_client (:string) - The client event name when the value change. Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - Accepts attributes:
    • value (:string) - The value of the item, useful in controlled mode and for API to identify the item.
    • disabled (:boolean) - Whether the item is disabled.
    • class (:string) - The class of the item.
    • aria_label (:string) - Accessibility label for the item button. If not provided, the value will be used as a fallback.

API

set_value(toggle_group_id, value)

Sets the toggle group value from client-side. Returns a Phoenix.LiveView.JS command.

Examples

<button phx-click={Corex.ToggleGroup.set_value("my-toggle-group", ["item-1"])}>
  Open Item 1
</button>

set_value(socket, toggle_group_id, value)

Sets the toggle group value from server-side. Pushes a LiveView event.

Examples

def handle_event("open_item", _params, socket) do
  socket = Corex.ToggleGroup.set_value(socket, "my-toggle-group", ["item-1"])
  {:noreply, socket}
end