عرض الشجرة · الأحداث
on_expanded_change وon_selection_change من الخادم، بالإضافة إلى أحداث DOM على العميل.
عند تغيير التوسيع والتحديد (الخادم)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
| Time | Source | Kind | Payload |
|---|---|---|---|
|
No event yet. Interact with the components to receive new events |
|||
<.tree_view
class="tree-view"
items={Corex.Tree.new([
%{label: "corex", value: "repo-corex", children: [
%{label: "lib", value: "repo-lib", children: [
%{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
]},
%{label: "mix.exs", value: "repo-mix-exs"}
]}
])}
on_expanded_change="tree_server_expanded"
on_selection_change="tree_server_selection"
>
<:label>Corex</:label>
<:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>
def handle_event("tree_server_expanded", %{"id" => id, "expandedValue" => expanded} = params, socket) do
IO.inspect(params, label: "tree_server_expanded")
{:noreply, socket}
end
def handle_event("tree_server_selection", %{"id" => id} = params, socket) do
IO.inspect(params, label: "tree_server_selection")
{:noreply, socket}
end
عند تغيير التوسيع والتحديد (العميل)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
| Time | Source | Kind | Payload |
|---|---|---|---|
|
No event yet. Interact with the components to receive new events |
|||
<.tree_view
id="tree-events-client"
class="tree-view"
expanded_value={["repo-corex", "repo-lib"]}
items={Corex.Tree.new([
%{label: "corex", value: "repo-corex", children: [
%{label: "lib", value: "repo-lib", children: [
%{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
]},
%{label: "mix.exs", value: "repo-mix-exs"}
]}
])}
on_expanded_change_client="tree-view-expanded-client"
on_selection_change_client="tree-view-selection-client"
>
<:label>Corex</:label>
<:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>
const el = document.getElementById("tree-events-client");
el?.addEventListener("tree-view-expanded-client", (event) => {
const d = event.detail;
console.log("expanded", d.id, d.expandedValue, "added:", d.added, "removed:", d.removed);
});
el?.addEventListener("tree-view-selection-client", (event) => {
const d = event.detail;
console.log("selection", d.id, d.selectedValue, "isItem:", d.isItem);
});
import type {
TreeViewExpandedChangedDetail,
TreeViewSelectionChangedDetail,
} from "corex";
const el = document.getElementById("tree-events-client");
el?.addEventListener("tree-view-expanded-client", (event: Event) => {
const d = (event as CustomEvent<TreeViewExpandedChangedDetail>).detail;
console.log("expanded", d.id, d.expandedValue, "added:", d.added, "removed:", d.removed);
});
el?.addEventListener("tree-view-selection-client", (event: Event) => {
const d = (event as CustomEvent<TreeViewSelectionChangedDetail>).detail;
console.log("selection", d.id, d.selectedValue, "isItem:", d.isItem);
});