Публичные методы и события
Кнопки работают через Data API, журнал получает события дерева, а ручной вызов serialize() доступен через экземпляр.
-
Документация Родительская ветвь
-
Начало работы Страница
-
Публичный API Страница
-
-
История версий Страница
Журнал / serialize()
HTML
<button data-vg-nestable-action="expandAll" data-vg-target="#docs-tree">Развернуть всё</button>
<button data-vg-nestable-action="collapseAll" data-vg-target="#docs-tree">Свернуть всё</button>
<div id="docs-tree" class="vg-nestable" data-vg-toggle="nestable">
<ol class="vg-nestable-list">...</ol>
</div>
JavaScript
import {VGNestable} from 'vgapp';
const element = document.querySelector('#docs-tree');
const tree = VGNestable.getOrCreateInstance(element);
element.addEventListener('vg.nestable.change', ({detail}) => {
console.log(detail.payload);
});
tree.collapseAll();
tree.expandItem('[data-id="201"]');
tree.refresh();
tree.save();
CSS
#docs-tree {
--vg-nestable-inner-border-radius: .6rem;
--vg-nestable-drag-element-shadow: 0 10px 24px rgb(0 0 0 / 18%);
--vg-nestable-placeholder-border: 1px dashed var(--vg-border-active);
}