علامات التبويب · الأحداث

    <.tabs
  class="tabs"
  value="lorem"
  on_value_change="tabs_value_changed"
  items={Corex.Content.new([
    %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
    %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
    %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
  ])}
/>

  

    def handle_event("tabs_value_changed", %{"value" => value, "id" => id} = params, socket) do
  IO.inspect(params, label: "tabs_value_changed")
  {:noreply, socket}
end
  

    <.tabs
  id="tabs-events-client"
  class="tabs"
  value="lorem"
  on_value_change_client="tabs-value-changed"
  items={Corex.Content.new([
    %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
    %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
    %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
  ])}
/>

  

    const el = document.getElementById("tabs-events-client");
el?.addEventListener("tabs-value-changed", (event) => console.log(event.detail));

  

    const el = document.getElementById("tabs-events-client");
el?.addEventListener("tabs-value-changed", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);