|
1 | 1 | # vue-tree
|
2 | 2 |
|
3 |
| -[](https://travis-ci.com/eidng8/vue-tree) |
4 |
| -[](https://coveralls.io/github/eidng8/vue-tree?branch=master) |
5 |
| -[](https://snyk.io/test/github/eidng8/vue-tree?targetFile=package.json) |
6 |
| - |
7 |
| -A Vue.js tree view component with stable DOM tree. By stable, it means the |
8 |
| -DOM structure will not change once it is rendered. |
| 3 | +[](https://travis-ci.com/eidng8/vue-tree) [](https://snyk.io/test/github/eidng8/vue-tree?targetFile=package.json) [](https://codeclimate.com/github/eidng8/vue-tree/maintainability) [](https://coveralls.io/github/eidng8/vue-tree?branch=master) [](https://travis-ci.com/eidng8/vue-tree/tree/dev) [](https://coveralls.io/github/eidng8/vue-tree?branch=dev) |
9 | 4 |
|
| 5 | +A Vue.js tree view component with stable DOM tree. By stable, it means the DOM structure will not change once it is rendered. |
10 | 6 |
|
11 | 7 | ## Performance Consideration
|
12 | 8 |
|
13 |
| -The DOM structure of this component doesn't change once rendered. |
14 |
| -Comparing to others using `v-if`, which generate sub-nodes while expanded. |
15 |
| -While working on long list of items, lags will be obvious. |
16 |
| - |
17 |
| -* This component will have a lag when once it is being rendered. After it is |
18 |
| -rendered, sub-trees are controlled by CSS, no DOM structure happens. |
19 |
| -* `v-if` components will lag whenever sub-trees are expanded, every time they |
20 |
| -are expanded. |
| 9 | +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. |
21 | 10 |
|
| 11 | +- This component will have a lag when once it is being rendered. After it is rendered, sub-trees are controlled by CSS, no DOM structure happens. |
| 12 | +- `v-if` components will lag whenever sub-trees are expanded, every time they are expanded. |
22 | 13 |
|
23 | 14 | ## Theming
|
24 | 15 |
|
25 |
| -This component provides a dark theme out of box. To use it, just add the |
26 |
| -`g8-tree__dark` class to the element. |
| 16 | +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-tree__dark` class to the element. |
27 | 17 |
|
28 | 18 | ```html
|
29 | 19 | <ul class="g8-tree-view g8-tree__dark">
|
30 | 20 | <g8-tree-view></g8-tree-view>
|
31 | 21 | </ul>
|
32 | 22 | ```
|
33 | 23 |
|
34 |
| -If you want to change the color of the component, just defined two variables |
35 |
| -before importing the scss file. |
| 24 | +If you want to change the color of the component, just defined two variables before importing the scss file. |
36 | 25 |
|
37 | 26 | ```scss
|
38 | 27 | /* index.scss */
|
39 | 28 |
|
40 | 29 | /* define these two variables before importing the scss file */
|
41 |
| -$g8-tree-bg: #ccc !default; |
42 |
| -$g8-tree-fg: #333 !default; |
| 30 | +$g8-tree-bg: #ccc; |
| 31 | +$g8-tree-fg: #333; |
43 | 32 |
|
44 |
| -@import "~vue-tree/src/components/tree-view.scss"; |
| 33 | +@import '~vue-tree/src/components/tree-view.scss'; |
45 | 34 | ```
|
| 35 | + |
| 36 | +## Props |
| 37 | + |
| 38 | +| Prop name | Description | Type | Values | Default | |
| 39 | +| --- | --- | --- | --- | --- | |
| 40 | +| item | The tree data to be rendered. | G8TreeItem | - | | |
| 41 | +| checker | Whether to add a checkbox before each item, allowing multiple nodes to<br>be checked. | boolean | - | false | |
| 42 | + |
| 43 | +## Events |
| 44 | + |
| 45 | +| Event name | Type | Description | |
| 46 | +| --- | --- | --- | |
| 47 | +| click | G8ClickEvent | A tree node has been clicked. | |
| 48 | +| dblclick | G8ClickEvent | A tree node has been double clicked. | |
| 49 | +| tag-clicked | G8TagClickEvent | A tree node tag has been clicked. | |
| 50 | +| tag-dbl-clicked | G8TagClickEvent | A tree node tag has been double clicked. | |
| 51 | +| state-changed | G8StateChangeEvent | Checkbox state of the node has changed. | |
0 commit comments