@vaadin/side-nav 24.1.0-alpha10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +190 -0
- package/README.md +76 -0
- package/enable.js +3 -0
- package/package.json +55 -0
- package/src/vaadin-side-nav-base-styles.js +104 -0
- package/src/vaadin-side-nav-item.d.ts +96 -0
- package/src/vaadin-side-nav-item.js +212 -0
- package/src/vaadin-side-nav.d.ts +83 -0
- package/src/vaadin-side-nav.js +139 -0
- package/theme/lumo/vaadin-side-nav-item.js +7 -0
- package/theme/lumo/vaadin-side-nav-styles.js +164 -0
- package/theme/lumo/vaadin-side-nav.js +7 -0
- package/theme/material/vaadin-side-nav.js +7 -0
- package/vaadin-side-nav-item.d.ts +1 -0
- package/vaadin-side-nav-item.js +2 -0
- package/vaadin-side-nav.d.ts +1 -0
- package/vaadin-side-nav.js +2 -0
- package/web-types.json +142 -0
- package/web-types.lit.json +76 -0
package/web-types.json
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/side-nav",
|
|
4
|
+
"version": "24.1.0-alpha10",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-side-nav-item",
|
|
11
|
+
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "path",
|
|
15
|
+
"description": "The path to navigate to",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "expanded",
|
|
26
|
+
"description": "Whether to show the child items or not",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "theme",
|
|
35
|
+
"description": "The theme variants to apply to the component.",
|
|
36
|
+
"value": {
|
|
37
|
+
"type": [
|
|
38
|
+
"string",
|
|
39
|
+
"null",
|
|
40
|
+
"undefined"
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"js": {
|
|
46
|
+
"properties": [
|
|
47
|
+
{
|
|
48
|
+
"name": "path",
|
|
49
|
+
"description": "The path to navigate to",
|
|
50
|
+
"value": {
|
|
51
|
+
"type": [
|
|
52
|
+
"string",
|
|
53
|
+
"null",
|
|
54
|
+
"undefined"
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "expanded",
|
|
60
|
+
"description": "Whether to show the child items or not",
|
|
61
|
+
"value": {
|
|
62
|
+
"type": [
|
|
63
|
+
"boolean"
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"events": [
|
|
69
|
+
{
|
|
70
|
+
"name": "expanded-changed",
|
|
71
|
+
"description": "Fired when the `expanded` property changes."
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "vaadin-side-nav",
|
|
78
|
+
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
|
|
79
|
+
"attributes": [
|
|
80
|
+
{
|
|
81
|
+
"name": "collapsible",
|
|
82
|
+
"description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
|
|
83
|
+
"value": {
|
|
84
|
+
"type": [
|
|
85
|
+
"boolean"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "collapsed",
|
|
91
|
+
"description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
|
|
92
|
+
"value": {
|
|
93
|
+
"type": [
|
|
94
|
+
"boolean"
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "theme",
|
|
100
|
+
"description": "The theme variants to apply to the component.",
|
|
101
|
+
"value": {
|
|
102
|
+
"type": [
|
|
103
|
+
"string",
|
|
104
|
+
"null",
|
|
105
|
+
"undefined"
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"js": {
|
|
111
|
+
"properties": [
|
|
112
|
+
{
|
|
113
|
+
"name": "collapsible",
|
|
114
|
+
"description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"boolean"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "collapsed",
|
|
123
|
+
"description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": [
|
|
126
|
+
"boolean"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"events": [
|
|
132
|
+
{
|
|
133
|
+
"name": "collapsed-changed",
|
|
134
|
+
"description": "Fired when the `collapsed` property changes."
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/side-nav",
|
|
4
|
+
"version": "24.1.0-alpha10",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-side-nav-item",
|
|
19
|
+
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?expanded",
|
|
24
|
+
"description": "Whether to show the child items or not",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": ".path",
|
|
31
|
+
"description": "The path to navigate to",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "@expanded-changed",
|
|
38
|
+
"description": "Fired when the `expanded` property changes.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "vaadin-side-nav",
|
|
47
|
+
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
|
|
48
|
+
"extension": true,
|
|
49
|
+
"attributes": [
|
|
50
|
+
{
|
|
51
|
+
"name": "?collapsible",
|
|
52
|
+
"description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?collapsed",
|
|
59
|
+
"description": "Whether the side nav is collapsed. When collapsed, the items are hidden.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "@collapsed-changed",
|
|
66
|
+
"description": "Fired when the `collapsed` property changes.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|