الأكورديون · الحدث

    <.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
  

    <.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);
});