Skip to content

Commit cdfe0d1

Browse files
authored
📚 Updated README with customisations example
1 parent ec65402 commit cdfe0d1

File tree

1 file changed

+37
-1
lines changed

1 file changed

+37
-1
lines changed

README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ A light-weight library for management of hierachical content. Most solutions I f
1010
- :heavy_check_mark: Item moved (drag-and-drop)
1111
- Custom formating of items on the tree based on the `type` property. (Coming soon)
1212
- :heavy_check_mark: Customising Icons
13-
- Rendering (checkboxes or plain content)
13+
- ✔️ Rendering (checkboxes or plain content)
1414
- Custom Context Menu
1515
3. Programmatically toggle item visibility based on the `type` property.
1616

@@ -68,4 +68,40 @@ You can customise item based on their `type` property.
6868
</tree-view>
6969
</template>
7070
71+
```
72+
73+
### Making Items Checkable Or Plain Content
74+
75+
You can customise if items of a particular `type` are checkable or just plain contents.
76+
77+
#### Example
78+
79+
80+
```ts
81+
<template>
82+
<tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView" />
83+
</template>
84+
85+
<script lang='ts'>
86+
import { Vue, Component} from 'vue-property-decorator';
87+
88+
import { TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contracts/types';
89+
90+
@Component
91+
export default class App extends Vue {
92+
93+
// This method is called when the tree view is created (on Created hook). And allows you to customise
94+
// items using the payload passed into the function.
95+
customiseTreeView(treeCreatedEvent: TreeViewCreatedEventPayload) {
96+
const customisations = treeCreatedEvent.itemCustomisations;
97+
98+
customisations.makeItemsCheckable([".doc", ".excel", "media" ]);
99+
}
100+
101+
treeViewNodes: TreeViewItem[] = [] // Populate tree items here.
102+
];
103+
}
104+
</script>
105+
106+
71107
```

0 commit comments

Comments
 (0)