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

تحميل غير متزامن، حالة مُتحكَّم بها، وتنقل بإعادة التوجيه.

غير متزامن

    <.async_result :let={tree} assign={@tree_data}>
  <:loading>
    <.tree_view_skeleton count={3} class="tree-view" />
  </:loading>

  <.tree_view
    id="patterns-tree-async"
    class="tree-view"
    items={tree.items}
    expanded_value={tree.expanded_value}
    value={tree.value}
  >
    <:label>Repository</:label>
    <:branch_indicator :let={_row}>
      <.heroicon name="hero-chevron-right" />
    </:branch_indicator>
  </.tree_view>
</.async_result>

    def mount(_params, _session, socket) do
  socket =
    assign_async(socket, :tree_data, fn ->
      Process.sleep(1000)

      items = E2e.TreeViewDemo.repo_tree()

      {:ok,
       %{
         tree_data: %{
           items: items,
           expanded_value: ["repo-lib"],
           value: []
         }
       }}
    end)

  {:ok, socket}
end

Redirect (navigation)

Navigate

Accordion

Structure

Playground

Tree view

Structure

Playground

    <.tree_view
  class="tree-view"
  redirect
  on_selection_change="patterns_tree_redirect_nav"
  expanded_value={["nav-branch-accordion", "nav-branch-tree-view"]}
  value={["/ar/tree-view/anatomy"]}
  items={
    Corex.Tree.new([
      %{
        label: "Accordion",
        value: "nav-branch-accordion",
        children: [
          %{label: "Structure", value: "/ar/accordion/anatomy"},
          %{label: "Playground", value: "/ar/accordion/playground"}
        ]
      },
      %{
        label: "Tree view",
        value: "nav-branch-tree-view",
        children: [
          %{label: "Structure", value: "/ar/tree-view/anatomy"},
          %{label: "Playground", value: "/ar/tree-view/playground"}
        ]
      }
    ])
  }
>
  <:label>Navigate</:label>
  <:branch_indicator :let={_row}>
    <.heroicon name="hero-chevron-right" />
  </:branch_indicator>
</.tree_view>