menu-barpackage.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/menu-bar",
"version": "24.5.3",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-menu-bar",
"description": "`` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```\n \n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n------------------|----------------\n`container` | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|----------------------------------\n`disabled` | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `` itself, the following internal\ncomponents are themable:\n\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-button).\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-item).\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-list-box).\n- `` - has the same API as [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-overlay).\n\nThe `` sub-menu elements have the following additional state attributes\non top of the built-in `` state attributes:\n\nAttribute | Description\n---------- |-------------\n`expanded` | Expanded parent item.\n\nNote: the `theme` attribute value set on `` is\npropagated to the internal components listed above.",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "overlay-class",
"description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "open-on-hover",
"description": "If true, the submenu will open on hover (mouseover) instead of click.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "reverse-collapse",
"description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "tab-navigation",
"description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
"value": {
"type": [
"boolean",
"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": "items",
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```",
"value": {
"type": [
"Array."
]
}
},
{
"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 like so:\n```\nmenuBar.i18n = {\n ...menuBar.i18n,\n moreOptions: 'More options'\n}\n```\n\nThe object has the following JSON structure and default values:\n```\n{\n moreOptions: 'More options'\n}\n```",
"value": {
"type": [
"MenuBarI18n"
]
}
},
{
"name": "overlayClass",
"description": "A space-delimited list of CSS class names\nto set on each sub-menu overlay element.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "openOnHover",
"description": "If true, the submenu will open on hover (mouseover) instead of click.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "reverseCollapse",
"description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "tabNavigation",
"description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "item-selected",
"description": "Fired when either a submenu item or menu bar button without nested children is clicked."
}
]
}
}
]
}
}
}