Accordion · Event
Subscribe to open value changes from LiveView or the client.
On Value Change (Server)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.accordion
class="accordion"
items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
on_value_change="accordion_value_changed"
>
<:indicator>
<.heroicon name="hero-chevron-right" />
</:indicator>
</.accordion>
def handle_event("accordion_value_changed", %{"id" => id, "value" => value} = params, socket) do
IO.inspect(params, label: "accordion_value_changed")
{:noreply, socket}
end
On Value Change (Client)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
| Time | Source | Value |
|---|---|---|
|
No event yet. Interact with the components to receive new events |
||
<.accordion
id="events-on-value-change-client"
class="accordion"
items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
on_value_change_client="accordion-value-changed"
>
<:indicator>
<.heroicon name="hero-chevron-right" />
</:indicator>
</.accordion>
const el = document.getElementById("events-on-value-change-client");
el?.addEventListener("accordion-value-changed", (event) => {
const detail = event.detail;
console.log(detail.id, detail.value);
});
const el = document.getElementById("events-on-value-change-client");
type Detail = { id: string; value: string[] };
el?.addEventListener("accordion-value-changed", (event: Event) => {
const detail = (event as CustomEvent<Detail>).detail;
console.log(detail.id, detail.value);
});