Skip to content

Commit 92fab83

Browse files
committed
📚 Updated README
1 parent e33cc9f commit 92fab83

File tree

1 file changed

+20
-12
lines changed

1 file changed

+20
-12
lines changed

README.md

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ A light-weight library for management of hierachical content. Most solutions I f
66

77
1. :heavy_check_mark: Hierachical rendering of content.
88
2. Event publishing/subscription from items
9-
- Item (un)checked event
10-
- :heavy_check_mark: Item moved (drag-and-drop)
11-
- Custom formating of items on the tree based on the `type` property. (Coming soon)
9+
- Subscribing to items checked event (based on type)
10+
3. :heavy_check_mark: Moving Items between folders (drag-and-drop)
11+
4. Custom formating of items on the tree based on the `type` property. (Coming soon)
1212
- :heavy_check_mark: Customising Icons
1313
- ✔️ Rendering (checkboxes or plain content)
14-
- Custom Context Menu
15-
3. Programmatically toggle item visibility based on the `type` property.
14+
- Custom Context Menu depending on item type.
15+
5. Programmatically toggle item visibility based on the `type` property.
1616

1717
## What it looks like.
1818

@@ -70,18 +70,27 @@ You can customise item based on their `type` property.
7070
7171
```
7272
73-
### Making Items Checkable Or Plain Content
73+
### Making Items Checkable Or Plain TreeView Item
7474
75-
You can customise if items of a particular `type` are checkable or just plain contents.
75+
`Tree-vue` supports 2-major types of tree items. Checkable items or plain items. You can set your preferences for a particular `type`. To do so listen to the createdEvent of the `tree-view` component.
7676
77-
#### Example
7877
78+
#### Schema of CreatedEvent Payload
7979
8080
```ts
81+
export interface TreeViewCreatedEventPayload {
82+
itemCustomisations: ItemTypeCustomisations;
83+
}
84+
```
85+
86+
#### Example
87+
88+
```html
8189
<template>
8290
<tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView" />
8391
</template>
84-
92+
```
93+
```ts
8594
<script lang='ts'>
8695
import { Vue, Component} from 'vue-property-decorator';
8796
@@ -90,8 +99,8 @@ import { TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contr
9099
@Component
91100
export default class App extends Vue {
92101
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.
102+
// This method is called when the tree view is created (on Created hook). And allows you to customise the tree-view items using the payload passed into the function.
103+
95104
customiseTreeView(treeCreatedEvent: TreeViewCreatedEventPayload) {
96105
const customisations = treeCreatedEvent.itemCustomisations;
97106
@@ -107,4 +116,3 @@ export default class App extends Vue {
107116
#### Output
108117

109118
![image](https://user-images.githubusercontent.com/39003759/121091770-7090b480-c7e2-11eb-9ee5-e79351bd8ed8.png)
110-

0 commit comments

Comments
 (0)