القائمة · الأحداث

    <.menu
  class="menu"
  on_select="menu_bind_selected"
  on_open_change="menu_bind_open"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

  

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

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

    <.menu
  class="menu"
  on_select="menu_selected"
  on_open_change="menu_open_changed"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

  

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

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

    <.menu
  id="menu-events-client"
  class="menu"
  on_select_client="menu-item-selected"
  on_open_change_client="menu-open-changed"
  items={[
    %Corex.Tree.Item{value: "menu", label: "Menu"},
    %Corex.Tree.Item{value: "combobox", label: "Combobox"},
    %Corex.Tree.Item{value: "select", label: "Select"}
  ]}
>
  <:trigger>Corex</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

  

    const el = document.getElementById("menu:menu-events-client");
el?.addEventListener("menu-open-changed", (e) => console.log(e.detail));
el?.addEventListener("menu-item-selected", (e) => console.log(e.detail));

  

    const el = document.getElementById("menu:menu-events-client");
el?.addEventListener("menu-open-changed", (e: Event) =>
  console.log((e as CustomEvent<unknown>).detail)
);
el?.addEventListener("menu-item-selected", (e: Event) =>
  console.log((e as CustomEvent<unknown>).detail)
);