@vaadin/app-layout 24.4.0-alpha1 → 24.4.0-dev.223e39f050
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/app-layout",
|
|
3
|
-
"version": "24.4.0-
|
|
3
|
+
"version": "24.4.0-dev.223e39f050",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,16 +36,17 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.4.0-
|
|
40
|
-
"@vaadin/button": "24.4.0-
|
|
41
|
-
"@vaadin/component-base": "24.4.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.4.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.4.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.4.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.4.0-dev.223e39f050",
|
|
40
|
+
"@vaadin/button": "24.4.0-dev.223e39f050",
|
|
41
|
+
"@vaadin/component-base": "24.4.0-dev.223e39f050",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050",
|
|
45
|
+
"lit": "^3.0.0"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
|
-
"@vaadin/tabs": "24.4.0-
|
|
49
|
+
"@vaadin/tabs": "24.4.0-dev.223e39f050",
|
|
49
50
|
"@vaadin/testing-helpers": "^0.6.0",
|
|
50
51
|
"sinon": "^13.0.2"
|
|
51
52
|
},
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"web-types.json",
|
|
54
55
|
"web-types.lit.json"
|
|
55
56
|
],
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
|
|
57
58
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2018 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
+
|
|
8
|
+
export const drawerToggle = css`
|
|
9
|
+
:host {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
cursor: default;
|
|
14
|
+
position: relative;
|
|
15
|
+
outline: none;
|
|
16
|
+
height: 24px;
|
|
17
|
+
width: 24px;
|
|
18
|
+
padding: 4px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
[part='icon'],
|
|
22
|
+
[part='icon']::after,
|
|
23
|
+
[part='icon']::before {
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 8px;
|
|
26
|
+
height: 3px;
|
|
27
|
+
width: 24px;
|
|
28
|
+
background-color: #000;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[part='icon']::after,
|
|
32
|
+
[part='icon']::before {
|
|
33
|
+
content: '';
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
[part='icon']::after {
|
|
37
|
+
top: 6px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[part='icon']::before {
|
|
41
|
+
top: 12px;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
7
|
+
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
8
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
9
|
|
|
8
10
|
/**
|
|
9
11
|
* The Drawer Toggle component controls the drawer in App Layout component.
|
|
@@ -14,7 +16,7 @@ import { Button } from '@vaadin/button/src/vaadin-button.js';
|
|
|
14
16
|
* </vaadin-app-layout>
|
|
15
17
|
* ```
|
|
16
18
|
*/
|
|
17
|
-
declare class DrawerToggle extends
|
|
19
|
+
declare class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {
|
|
18
20
|
ariaLabel: string;
|
|
19
21
|
}
|
|
20
22
|
|
|
@@ -3,56 +3,16 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html } from '@polymer/polymer/
|
|
7
|
-
import {
|
|
6
|
+
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
|
|
8
|
+
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
8
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
|
+
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
9
11
|
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
|
|
10
|
-
import {
|
|
12
|
+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
+
import { drawerToggle } from './vaadin-drawer-toggle-styles.js';
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
* Use registerStyles instead of the `<style>` tag to make sure
|
|
14
|
-
* that this CSS will override core styles of `vaadin-button`.
|
|
15
|
-
*/
|
|
16
|
-
registerStyles(
|
|
17
|
-
'vaadin-drawer-toggle',
|
|
18
|
-
css`
|
|
19
|
-
:host {
|
|
20
|
-
display: inline-flex;
|
|
21
|
-
align-items: center;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
cursor: default;
|
|
24
|
-
position: relative;
|
|
25
|
-
outline: none;
|
|
26
|
-
height: 24px;
|
|
27
|
-
width: 24px;
|
|
28
|
-
padding: 4px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
[part='icon'],
|
|
32
|
-
[part='icon']::after,
|
|
33
|
-
[part='icon']::before {
|
|
34
|
-
position: absolute;
|
|
35
|
-
top: 8px;
|
|
36
|
-
height: 3px;
|
|
37
|
-
width: 24px;
|
|
38
|
-
background-color: #000;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
[part='icon']::after,
|
|
42
|
-
[part='icon']::before {
|
|
43
|
-
content: '';
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
[part='icon']::after {
|
|
47
|
-
top: 6px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
[part='icon']::before {
|
|
51
|
-
top: 12px;
|
|
52
|
-
}
|
|
53
|
-
`,
|
|
54
|
-
{ moduleId: 'vaadin-drawer-toggle-styles' },
|
|
55
|
-
);
|
|
15
|
+
registerStyles('vaadin-drawer-toggle', [buttonStyles, drawerToggle], { moduleId: 'vaadin-drawer-toggle-styles' });
|
|
56
16
|
|
|
57
17
|
/**
|
|
58
18
|
* The Drawer Toggle component controls the drawer in App Layout component.
|
|
@@ -64,16 +24,18 @@ registerStyles(
|
|
|
64
24
|
* ```
|
|
65
25
|
*
|
|
66
26
|
* @customElement
|
|
67
|
-
* @extends
|
|
27
|
+
* @extends HTMLElement
|
|
28
|
+
* @mixes ButtonMixin
|
|
29
|
+
* @mixes DirMixin
|
|
30
|
+
* @mixes ThemableMixin
|
|
68
31
|
*/
|
|
69
|
-
class DrawerToggle extends
|
|
32
|
+
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
|
|
70
33
|
static get template() {
|
|
71
34
|
return html`
|
|
72
35
|
<slot id="slot">
|
|
73
36
|
<div part="icon"></div>
|
|
74
37
|
</slot>
|
|
75
38
|
<div part="icon" hidden$="[[!_showFallbackIcon]]"></div>
|
|
76
|
-
<slot name="tooltip"></slot>
|
|
77
39
|
`;
|
|
78
40
|
}
|
|
79
41
|
|
package/web-types.json
DELETED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/app-layout",
|
|
4
|
-
"version": "24.4.0-alpha1",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"contributions": {
|
|
7
|
-
"html": {
|
|
8
|
-
"elements": [
|
|
9
|
-
{
|
|
10
|
-
"name": "vaadin-app-layout",
|
|
11
|
-
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name | Description\n--------------|---------------------------------------------------------|\n`navbar` | Container for the navigation bar\n`drawer` | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
|
|
12
|
-
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "primary-section",
|
|
15
|
-
"description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"PrimarySection"
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "drawer-opened",
|
|
24
|
-
"description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
|
|
25
|
-
"value": {
|
|
26
|
-
"type": [
|
|
27
|
-
"boolean"
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
"name": "close-drawer-on",
|
|
33
|
-
"description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
|
|
34
|
-
"value": {
|
|
35
|
-
"type": [
|
|
36
|
-
"string"
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"name": "theme",
|
|
42
|
-
"description": "The theme variants to apply to the component.",
|
|
43
|
-
"value": {
|
|
44
|
-
"type": [
|
|
45
|
-
"string",
|
|
46
|
-
"null",
|
|
47
|
-
"undefined"
|
|
48
|
-
]
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
],
|
|
52
|
-
"js": {
|
|
53
|
-
"properties": [
|
|
54
|
-
{
|
|
55
|
-
"name": "i18n",
|
|
56
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n ...appLayout.i18n,\n drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n drawer: 'Drawer'\n}\n```",
|
|
57
|
-
"value": {
|
|
58
|
-
"type": [
|
|
59
|
-
"AppLayoutI18n"
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
"name": "primarySection",
|
|
65
|
-
"description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
|
|
66
|
-
"value": {
|
|
67
|
-
"type": [
|
|
68
|
-
"PrimarySection"
|
|
69
|
-
]
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
"name": "drawerOpened",
|
|
74
|
-
"description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
|
|
75
|
-
"value": {
|
|
76
|
-
"type": [
|
|
77
|
-
"boolean"
|
|
78
|
-
]
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"name": "closeDrawerOn",
|
|
83
|
-
"description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
|
|
84
|
-
"value": {
|
|
85
|
-
"type": [
|
|
86
|
-
"string"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
],
|
|
91
|
-
"events": [
|
|
92
|
-
{
|
|
93
|
-
"name": "close-overlay-drawer",
|
|
94
|
-
"description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method."
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
"name": "primary-section-changed",
|
|
98
|
-
"description": "Fired when the `primarySection` property changes."
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
"name": "drawer-opened-changed",
|
|
102
|
-
"description": "Fired when the `drawerOpened` property changes."
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
"name": "overlay-changed",
|
|
106
|
-
"description": "Fired when the `overlay` property changes."
|
|
107
|
-
}
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "vaadin-drawer-toggle",
|
|
113
|
-
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n```\n<vaadin-app-layout>\n <vaadin-drawer-toggle slot=\"navbar\">Toggle drawer</vaadin-drawer-toggle>\n</vaadin-app-layout>\n```",
|
|
114
|
-
"attributes": [
|
|
115
|
-
{
|
|
116
|
-
"name": "disabled",
|
|
117
|
-
"description": "If true, the user cannot interact with this element.",
|
|
118
|
-
"value": {
|
|
119
|
-
"type": [
|
|
120
|
-
"boolean",
|
|
121
|
-
"null",
|
|
122
|
-
"undefined"
|
|
123
|
-
]
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"name": "aria-label",
|
|
128
|
-
"description": "",
|
|
129
|
-
"value": {
|
|
130
|
-
"type": [
|
|
131
|
-
"string",
|
|
132
|
-
"null",
|
|
133
|
-
"undefined"
|
|
134
|
-
]
|
|
135
|
-
}
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
"name": "theme",
|
|
139
|
-
"description": "The theme variants to apply to the component.",
|
|
140
|
-
"value": {
|
|
141
|
-
"type": [
|
|
142
|
-
"string",
|
|
143
|
-
"null",
|
|
144
|
-
"undefined"
|
|
145
|
-
]
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
],
|
|
149
|
-
"js": {
|
|
150
|
-
"properties": [
|
|
151
|
-
{
|
|
152
|
-
"name": "disabled",
|
|
153
|
-
"description": "If true, the user cannot interact with this element.",
|
|
154
|
-
"value": {
|
|
155
|
-
"type": [
|
|
156
|
-
"boolean",
|
|
157
|
-
"null",
|
|
158
|
-
"undefined"
|
|
159
|
-
]
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "ariaLabel",
|
|
164
|
-
"description": "",
|
|
165
|
-
"value": {
|
|
166
|
-
"type": [
|
|
167
|
-
"string",
|
|
168
|
-
"null",
|
|
169
|
-
"undefined"
|
|
170
|
-
]
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
],
|
|
174
|
-
"events": []
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
]
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
}
|
package/web-types.lit.json
DELETED
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/app-layout",
|
|
4
|
-
"version": "24.4.0-alpha1",
|
|
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-app-layout",
|
|
19
|
-
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name | Description\n--------------|---------------------------------------------------------|\n`navbar` | Container for the navigation bar\n`drawer` | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
|
|
20
|
-
"extension": true,
|
|
21
|
-
"attributes": [
|
|
22
|
-
{
|
|
23
|
-
"name": "?drawerOpened",
|
|
24
|
-
"description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
|
|
25
|
-
"value": {
|
|
26
|
-
"kind": "expression"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"name": ".i18n",
|
|
31
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n ...appLayout.i18n,\n drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n drawer: 'Drawer'\n}\n```",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": ".primarySection",
|
|
38
|
-
"description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"name": ".closeDrawerOn",
|
|
45
|
-
"description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
|
|
46
|
-
"value": {
|
|
47
|
-
"kind": "expression"
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "@close-overlay-drawer",
|
|
52
|
-
"description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method.",
|
|
53
|
-
"value": {
|
|
54
|
-
"kind": "expression"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": "@primary-section-changed",
|
|
59
|
-
"description": "Fired when the `primarySection` property changes.",
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": "@drawer-opened-changed",
|
|
66
|
-
"description": "Fired when the `drawerOpened` property changes.",
|
|
67
|
-
"value": {
|
|
68
|
-
"kind": "expression"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"name": "@overlay-changed",
|
|
73
|
-
"description": "Fired when the `overlay` property changes.",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
]
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
"name": "vaadin-drawer-toggle",
|
|
82
|
-
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n```\n<vaadin-app-layout>\n <vaadin-drawer-toggle slot=\"navbar\">Toggle drawer</vaadin-drawer-toggle>\n</vaadin-app-layout>\n```",
|
|
83
|
-
"extension": true,
|
|
84
|
-
"attributes": [
|
|
85
|
-
{
|
|
86
|
-
"name": "?disabled",
|
|
87
|
-
"description": "If true, the user cannot interact with this element.",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"name": ".ariaLabel",
|
|
94
|
-
"description": "",
|
|
95
|
-
"value": {
|
|
96
|
-
"kind": "expression"
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
]
|
|
100
|
-
}
|
|
101
|
-
]
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|