Package Exports

sk-tree-default

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sk-tree-default) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Skinny Widgets Tree for Default Theme

tree element

npm i sk-tree sk-tree-default --save

then add the following to your html

<sk-config
    theme="default"
    base-path="/node_modules/sk-core/src"
    theme-path="/node_modules/sk-theme-default"
></sk-config>
<sk-tree link-tpl-str='<a href="?categoryId={{ id }}">{{ name }}</a>' tree-data='[{"id": 1, "name": "category1", "parentId": 0}, {"id": 2, "name": "category2", "parentId": 0}, {"id": 3, "name": "category11", "parentId": 1}, {"id": 4, "name": "category111", "parentId": 3}]'></sk-tree>
<script type="module">
    import { SkTree } from './node_modules/sk-tree/index.js';

    customElements.define('sk-tree', SkTree);
</script>

attributes

expanded - "false" value collapses the tree and renders it as collapsible, "true" renders as expanded but collapsible

selected-id - id of the element that's branch will be forced to be extended

link-tpl-str - inline template for each item contents

item-tpl-path - external template path for item

root-tn - root tag name (default: 'ul')

item-tn - item tag name (default: 'li')

root-cn - class name for root (default: 'sk-tree-root')

item-cn - class name for item (default: 'sk-tree-item')

branch-cn - class name for branch (default: 'sk-tree-has-child')

template

id: SkTreeTpl, SkTreeItemTpl