عرض الشجرة · النمط البصري
ألوان دلالية، كثافة، نصف قطر، وأدوات نص عبر فئات المعدّل على عرض الشجرة.
اللون
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
<.tree_view class="tree-view max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--accent max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--brand max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--info max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--alert max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--success max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
الحجم
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
<.tree_view class="tree-view tree-view--sm max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--md max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--lg max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--xl max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
نص
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
<.tree_view class="tree-view tree-view--text-sm max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--text-md max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--text-lg max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--text-xl max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--text-2xl max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
نصف القطر
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
<.tree_view class="tree-view tree-view--rounded-none max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--rounded-sm max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--rounded-md max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--rounded-lg max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--rounded-xl max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view tree-view--rounded-full max-w-xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
أقصى عرض
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
lib
tree_view.ex
tree_view_demo.ex
test
tree_view_test.exs
mix.exs
<.tree_view class="tree-view max-w-2xs" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view max-w-md" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view max-w-xl" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>
<.tree_view class="tree-view max-w-2xl" items={Corex.Tree.new([
%{label: "lib", value: "lib", children: [
%{label: "tree_view.ex", value: "lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "lib-tree-view-demo-ex"}
]},
%{label: "test", value: "test", children: [
%{label: "tree_view_test.exs", value: "test-tree-view-test-exs"}
]},
%{label: "mix.exs", value: "mix-exs"}
])}>
<:branch_indicator><.heroicon name="hero-chevron-right" class="icon" /></:branch_indicator>
</.tree_view>