app-layoutpackage.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/app-layout",
"version": "24.5.3",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-app-layout",
"description": "`` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```\n\n Company Name
\n \n Menu item 1 \n \n \n \n Page title
\n Page content
\n \n \n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of ``).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n\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 `` 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.",
"attributes": [
{
"name": "primary-section",
"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.",
"value": {
"type": [
"PrimarySection"
]
}
},
{
"name": "drawer-opened",
"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",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "close-drawer-on",
"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",
"value": {
"type": [
"string"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "i18n",
"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```",
"value": {
"type": [
"AppLayoutI18n"
]
}
},
{
"name": "primarySection",
"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.",
"value": {
"type": [
"PrimarySection"
]
}
},
{
"name": "drawerOpened",
"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",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "closeDrawerOn",
"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",
"value": {
"type": [
"string"
]
}
}
],
"events": [
{
"name": "close-overlay-drawer",
"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."
},
{
"name": "primary-section-changed",
"description": "Fired when the `primarySection` property changes."
},
{
"name": "drawer-opened-changed",
"description": "Fired when the `drawerOpened` property changes."
},
{
"name": "overlay-changed",
"description": "Fired when the `overlay` property changes."
}
]
}
},
{
"name": "vaadin-drawer-toggle",
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n```\n\n Toggle drawer \n \n```",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "aria-label",
"description": "",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "ariaLabel",
"description": "",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"events": []
}
}
]
}
}
}