Tree Menu

Красивое дерево для вашего проекта

Как использовать

Установите пакет

npm install --save @emilgadzhiyev/tree-menu

Создайте в месте, где должно вывестись дерево, код следующего вида

/* Обратите внимание, что конфигурация задается в формате JSON, а не объектом
Javascirpt, поэтому не забывайте оборачивать ключи объктов в кавычки. Все
популярные IDE понимают `type="application/json"` и помогут вам в форматировании
конфигурации и расставлении кавычек */

<script type="application/json" class="tree">
  {
      "id":"Tree id",
      "search": true,
      "defaultBranchIcon":"/src/icons/folder-gray.svg",
      ...
      "nodes": [ ... ]
  }
</script>

Импортируйте и запустите дерево, передав ему элемент с конфигурацией

import { createTree } from '@emilgadzhiyev/tree-menu'

createTree(document.querySelector('script.tree'))

Параметры конфигурации

См Документацию

Внешние события

Дерево диспатчит на document событие @emilgadzhiyev/tree-menu Подробности см в документации

Пример конфигурации дерева

<script class="tree" type="application/json">
  {
    "id": "tree1",
    "defaultBranchIcon": "/src/icons/folder-gray.svg",
    "defaultLeafIcon": "/src/icons/file.svg",
    "nodes": [
      {
        "label": "C:/",
        "children": [
          {
            "label": "users",
            "icon": "/src/icons/eas.svg",
            "children": [
              {
                "label": "Emil",
                "children": [
                  { "label": "Image.jpg", "link": "image.jpg" },
                  { "label": "Image2.jpg", "link": "image.jpg" },
                  { "label": "Image3.jpg", "link": "image.jpg" }
                ]
              },
              {
                "label": "Common",
                "children": [
                  { "label": "Image.jpg", "link": "image.jpg" },
                  { "label": "Image2.jpg", "link": "image.jpg" },
                  { "label": "Image3.jpg", "link": "image.jpg" }
                ]
              }
            ]
          },
          {
            "label": "windows",
            "children": [
              {
                "label": "drivers",
                "icon": "/src/icons/shr.svg",
                "children": [
                  {
                    "label": "file1.jpg",
                    "link": "https://jysen1.csb.app/",
                    "icon": "/src/icons/file.svg"
                  },
                  {
                    "label": "file2.jpg",
                    "link": "file.jpg",
                    "icon": "/src/icons/file.svg"
                  },
                  {
                    "label": "file3.jpg",
                    "link": "file.jpg",
                    "icon": "/src/icons/file.svg"
                  }
                ]
              },
              { "label": "hosts.file", "link": "hosts.file" },
              { "label": "other.file", "link": "hoopsts.file" },
              {
                "label": "etc",
                "icon": "/src/icons/sim.svg",
                "children": [
                  { "label": "hosts.file", "link": "hosts.file" },
                  { "label": "other.file", "link": "hoopsts.file" }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
</script>