بنية Tree view ·

    <.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"}]}
    ])
  }
/>

  

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

  

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

  

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