صندوق القائمة · واجهة برمجية

    <.action phx-click={Corex.Listbox.set_value("listbox-api-sv-client", ["bel"])}>Belgium</.action>
<.action phx-click={Corex.Listbox.set_value("listbox-api-sv-client", [])}>Clear</.action>
<.listbox id="listbox-api-sv-client" class="listbox" items={
  Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])
}>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    <.action phx-click="listbox_api_set_value">Belgium</.action>
<.listbox id="listbox-api-sv-server" class="listbox" items={
  Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])
}>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    def handle_event("listbox_api_set_value", _params, socket) do
  {:noreply, Corex.Listbox.set_value(socket, "listbox-api-sv-server", ["bel"])}
end

  

    const el = document.getElementById("listbox-api-sv-js");
el?.dispatchEvent(
  new CustomEvent("corex:listbox:set-value", {
    bubbles: false,
    detail: { value: ["deu"] },
  })
);

  

    <.action phx-click={Corex.Listbox.value("listbox-api-val-client")}>Read selection</.action>
<.listbox id="listbox-api-val-client" class="listbox" items={
  Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])
}>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    <.action phx-click="listbox_api_value_server">Read selection</.action>
<.listbox id="listbox-api-val-server" class="listbox" items={
  Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])
}>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    def handle_event("listbox_api_value_server", _params, socket) do
  {:noreply, Corex.Listbox.value(socket, "listbox-api-val-server")}
end

def handle_event("listbox_value_response", _params, socket) do
  {:noreply, socket}
end