g8-vue-tree v0.2.4

vue-tree

A Vue tree view component with stable DOM structure. By stable, it means the DOM structure will not change once it is rendered.

Demo

Performance Consideration

The DOM structure of this component doesn't change once rendered. Comparing to others using v-if, which generate sub-nodes while expanded. While working on long list of items, lags will be obvious.

• This component will have a lag when it is being rendered for the first time. After it is rendered, sub-trees are controlled by CSS, no DOM structure change.
• v-if components will lag whenever sub-trees are expanded, every time they are expanded.

There is an issue for this. Check out more detail there.

Props

Scoped slots

Default slot

<span class="g8-tree__node__entry__label">
  <slot :item="item">{{ item[itemLabel] }}</slot>
</span>

This is the entry's main content slot. Defaults to {{ item[itemLabel] }}. The current item entry is exposed as scoped variable item.

Tag (badge) slot

<label
  class="g8-tree__node__entry__tags__tag"
  v-for="(tag, idx) in item[tagsKey]"
  :key="idx"
  :id="tag[tagId]"
  :title="tag[tagHint]"
>
  <slot name="tag" :tag="tag" :item="item">{{ tag[tagLabel] }}</slot>
</label>

This is the entry's tag content slot. Defaults to {{ tag[tagLabel] }}. The current item entry is exposed as scoped variable item. The current tag is exposed as scoped variable tag.

Types

G8TreeItem

Below is a list of presumable fields, all of them are optional. You can place whatever data you want to a tree item, then use the props mentioned above to specify content you want to display.

G8TreeItemTag

Below is a list of presumable fields, all of them are optional. You can place whatever data you want to tags, then use the props mentioned above to specify content you want to display.

G8ClickEvent

extends MouseEvent

Events

This component defines only two events, for expanding/collapsing nodes, and checkbox state changes.

Other events

Theming

Colors

The bundled style sheet can be imported from 'g8-vue-tree/dist/g8-vue-tree.css'. This component provides a dark theme out of box. To use it, just add the g8--dark class to the element.

<ul class="g8-tree__view g8--dark">
  <g8-tree__view></g8-tree__view>
</ul>

If you want to change the color of the component, just define two variables before importing the scss file.

/* index.scss */

/* define these two variables before importing the scss file */
$g8-tree-bg: #ccc;
$g8-tree-fg: #333;

@import '~vue-tree/src/components/tree-view.scss';

Fonts

This component deliberately left out font-family from CSS. You can use whatever font you like, just add something like below to you styles:

.g8-tree__view {
  font-family: 'you favorite font';
}