بنية Tree view ·
استكشف البنية والمؤشر والفتحات المخصّصة والوضع المركّب
الحد الأدنى
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
assets
tree-view.ts
mix.exs
<.tree_view
class="tree-view"
items={
Corex.Tree.new([
%{label: "Components", value: "components", children: [
%{label: "Accordion", value: "accordion"},
%{label: "Checkbox", value: "checkbox"},
%{label: "Tree view", value: "tree-view"}
]},
%{label: "Form", value: "form"},
%{label: "Tree", value: "tree", children: [%{label: "Tree.Item", value: "tree-item"}]}
])
}
/>
مع indicator
Corex
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
assets
tree-view.ts
mix.exs
<.tree_view
class="tree-view"
items={
Corex.Tree.new([
%{label: "src", value: "src", children: [
%{label: "components", value: "components"},
%{label: "index.ts", value: "index.ts"}
]},
%{label: "README.md", value: "readme"}
])
}
>
<:branch_indicator :let={item}>
<.heroicon :if={item.children && item.children != []} name="hero-chevron-right" />
</:branch_indicator>
<:item_indicator>
<.heroicon name="hero-check" />
</:item_indicator>
</.tree_view>
فتحات مخصصة
Corex
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
assets
tree-view.ts
mix.exs
<.tree_view
class="tree-view"
items={
Corex.Tree.new([
%{label: "src", value: "src", children: [
%{label: "components", value: "components", children: [%{label: "tree-view.tsx", value: "tree-view.tsx"}]},
%{label: "main.ts", value: "main.ts"}
]},
%{label: "README.md", value: "readme"}
])
}
>
<:label>Project</:label>
<:branch :let={item}>
<.heroicon name="hero-folder" /> {item.label}
</:branch>
<:item :let={item}>
<.heroicon name="hero-document" /> {item.label}
</:item>
</.tree_view>
مركّب
Corex
Lib
tree_view.ex
tree_view_demo.ex
Test
tree_view_test.exs
Assets
tree-view.ts
mix.exs
<.tree_view
:let={ctx}
compound
class="tree-view"
items={
Corex.Tree.new([
%{label: "Components", value: "components", children: [
%{label: "Accordion", value: "accordion"},
%{label: "Checkbox", value: "checkbox"}
]},
%{label: "Form", value: "form"}
])
}
>
<.tree_view_root ctx={ctx}>
<:label>Project</:label>
<.tree_view_branch :let={branch} :for={item <- ctx.items} ctx={ctx} item={item}>
<.tree_view_branch_trigger branch={branch}>
{item.label}
<:indicator>
<.heroicon name="hero-chevron-right" />
</:indicator>
</.tree_view_branch_trigger>
<.tree_view_branch_content branch={branch}>
<.tree_view_item :for={child <- item.children || []} ctx={ctx} item={child}>
{child.label}
</.tree_view_item>
</.tree_view_branch_content>
</.tree_view_branch>
</.tree_view_root>
</.tree_view>