Тема загрузки FancyTree не применяется - PullRequest
Новая
       37

Тема загрузки FancyTree не применяется

0 голосов
/ 18 октября 2019

Я инициализировал FancyTree в классе. Вот что импортирует класс: Tree.js 

import fancytree from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
import 'jquery.fancytree/dist/modules/jquery.fancytree.dnd5';
import 'jquery.fancytree/dist/modules/jquery.fancytree.glyph';
import 'jquery.fancytree/dist/modules/jquery.fancytree.table';
import 'jquery.fancytree/dist/modules/jquery.fancytree.wide';

Я использую RollUp, поэтому импорт работает так, как задумано. Тем не менее, я просто не могу найти решение для применения определенной темы, то есть bootstrap3 в моем дереве. index.html import 

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/icons.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css">
    <link href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">

И, наконец, инициализация FancyTree. Tree.js 

$('#explorer-tree').fancytree({
      extensions: ['dnd5', 'edit', 'glyph', 'wide'],
      glyph: {
        preset: 'bootstrap3',
        map: {
          doc: 'fa fa-file-o',
          docOpen: 'fa fa-file-o',
          checkbox: 'fa fa-square-o',
          checkboxSelected: 'fa fa-check-square-o',
          checkboxUnknown: 'fa fa-square',
          dragHelper: 'fa arrow-right',
          dropMarker: 'fa long-arrow-right',
          error: 'fa fa-warning',
          expanderClosed: 'fa fa-caret-right',
          expanderLazy: 'fa fa-angle-right',
          expanderOpen: 'fa fa-caret-down',
          folder: 'fa fa-folder-o',
          folderOpen: 'fa fa-folder-open-o',
          loading: 'fa fa-spinner fa-pulse',
        },
      },
      icon: function(event, data) {
        // if( data.node.isFolder() ) {
        //   return "glyphicon glyphicon-book";
        // }
      },
      source: [
        {title: 'project-name', key: '1',
          expanded: true},
      ],
    });

Дерево выглядит так же - по умолчанию. Нет стайлинга, нет ничего. Даже документация на самом деле не объясняет, как это работает.

1 Ответ

0 голосов
/ 18 октября 2019

Поскольку FancyTree сделан очень изолированным способом, единственный способ применить пользовательские стили - это не включать в себя стили по умолчанию. Мне пришлось переписать CSS-файлы, чтобы настроить их, иначе это просто ничего не сделало бы. Значения по умолчанию также будут перекрываться значками awesome4, если импортировано несколько файлов CSS.

...