عرض الشجرة · النمط البصري

    <.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>

  

    <.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>

  

    <.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>

  

    <.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>

  

    <.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>