Skip to content

Commit a7fc9b3

Browse files
author
Sachin Singh
committed
README updated
1 parent dde34e4 commit a7fc9b3

File tree

2 files changed

+64
-2
lines changed

2 files changed

+64
-2
lines changed

CUSTOMIZE.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Using existing HTML to build context menu
2+
3+
You can use an existing DOM node as a reference to context menu.
4+
5+
```html
6+
<ul class="context-menu">
7+
<li>Item 1</li>
8+
<li>Item 2</li>
9+
<li>Item 3</li>
10+
<li>Item 4</li>
11+
</ul>
12+
```
13+
14+
```js
15+
import { ContextMenu } from '@scssyworks/context-builder';
16+
17+
new ContextMenu(null, {
18+
rootElement: document.querySelector('.context-menu')
19+
});
20+
```
21+
22+
Existing DOM structure can readily be used as a context menu. However, you can add and customize elements at runtime.
23+
24+
# Adding custom menu items dynamically
25+
26+
```js
27+
import { ContextMenu, ContextItem } from '@scssyworks/context-builder';
28+
29+
const contextMenu = new ContextMenu(null, {
30+
rootElement: document.querySelector('.context-menu')
31+
});
32+
contextMenu.add(
33+
new ContextItem('Item 5', {
34+
rootElement: document.createElement('li')
35+
});
36+
);
37+
```
38+
39+
You can also insert a nested list to existing menu:
40+
41+
```js
42+
import { ContextMenu, ContextItem, ContextList } from '@scssyworks/context-builder';
43+
44+
const contextMenu = new ContextMenu(null, {
45+
rootElement: document.querySelector('.context-menu')
46+
});
47+
contextMenu.add(
48+
new ContextItem('Item 5', {
49+
rootElement: document.createElement('li')
50+
});
51+
(new ContextList('Item 6', {
52+
rootElement: document.createElement('li'),
53+
listElement: document.createElement('ul') // This list will be used to insert nested li items
54+
})).add(
55+
new ContextItem('Child Item 1', {
56+
rootElement: document.createElement('li')
57+
})
58+
)
59+
);
60+
```

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Context Builder
22

3-
Build context menus with ease.
3+
A powerful and easy to use library for building custom context menus.
44

55
```sh
66
npm i @scssyworks/context-builder
@@ -97,4 +97,6 @@ contextMenu.cleanup();
9797

9898
# Customize
9999

100-
Context Builder is fully customizable. You can use your own elements to build context menu. Use the following guide to customize your context menus:
100+
Context Builder is fully customizable. You can use your own elements to build context menu. Use the following guide to customize your context menus:
101+
102+
https://github.com/scssyworks/context-builder/blob/master/CUSTOMIZE.md

0 commit comments

Comments
 (0)