Corex.Collapsible (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Collapsible.

Examples

Basic Usage

<.collapsible id="my-collapsible">
  <:trigger>Toggle Content</:trigger>
  <:content>
    This content can be collapsed and expanded.
  </:content>
</.collapsible>

Controlled Mode

<.collapsible
  id="my-collapsible"
  controlled
  open={@collapsible_open}
  on_open_change="collapsible_changed">
  <:trigger>Toggle Content</:trigger>
  <:content>
    This content can be collapsed and expanded.
  </:content>
</.collapsible>
def handle_event("collapsible_changed", %{"open" => open}, socket) do
  {:noreply, assign(socket, :collapsible_open, open)}
end

API Control

In order to use the API, you must use an id on the component

Client-side

<button phx-click={Corex.Collapsible.set_open("my-collapsible", true)}>
  Open
</button>

Server-side

def handle_event("open_collapsible", _, socket) do
  {:noreply, Corex.Collapsible.set_open(socket, "my-collapsible", true)}
end

Styling

Use data attributes to target elements:

[data-scope="collapsible"][data-part="root"] {}
[data-scope="collapsible"][data-part="trigger"] {}
[data-scope="collapsible"][data-part="content"] {}

If you wish to use the default Corex styling, you can use the class collapsible on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/collapsible.css";

You can then use modifiers

<.collapsible class="collapsible collapsible--accent collapsible--lg">

Learn more about modifiers and Corex Design

Summary

Components

collapsible(assigns)

Renders a collapsible component.

API

set_open(collapsible_id, open)

Sets the collapsible open state from client-side. Returns a Phoenix.LiveView.JS command.

set_open(socket, collapsible_id, open)

Sets the collapsible open state from server-side. Pushes a LiveView event.

Components

collapsible(assigns)

Renders a collapsible component.

Attributes

  • id (:string) - The id of the collapsible, useful for API to identify the collapsible.
  • open (:boolean) - The initial open state or the controlled open state. Defaults to false.
  • controlled (:boolean) - Whether the collapsible is controlled. Only in LiveView, the on_open_change event is required. Defaults to false.
  • disabled (:boolean) - Whether the collapsible is disabled. Defaults to false.
  • dir (:string) - The direction of the collapsible. When nil, derived from document (html lang + config :rtl_locales). Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • on_open_change (:string) - The server event name when the open state changes. Defaults to nil.
  • on_open_change_client (:string) - The client event name when the open state changes. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - Accepts attributes:
    • class (:string)
  • content (required) - Accepts attributes:
    • class (:string)

API

set_open(collapsible_id, open)

Sets the collapsible open state from client-side. Returns a Phoenix.LiveView.JS command.

Examples

<button phx-click={Corex.Collapsible.set_open("my-collapsible", true)}>
  Open
</button>

set_open(socket, collapsible_id, open)

Sets the collapsible open state from server-side. Pushes a LiveView event.

Examples

def handle_event("open_collapsible", _params, socket) do
  socket = Corex.Collapsible.set_open(socket, "my-collapsible", true)
  {:noreply, socket}
end