com.github.fluorumlabs.disconnect.vaadin.elements.MenuBarElement Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation

Vaadin components bindings for Disconnect Zero

The newest version!

package com.github.fluorumlabs.disconnect.vaadin.elements;

import com.github.fluorumlabs.disconnect.core.annotations.Import;
import com.github.fluorumlabs.disconnect.core.annotations.NpmPackage;
import com.github.fluorumlabs.disconnect.vaadin.Vaadin;
import com.github.fluorumlabs.disconnect.vaadin.elements.mixins.ButtonsMixin;
import com.github.fluorumlabs.disconnect.vaadin.elements.mixins.ElementMixin;
import com.github.fluorumlabs.disconnect.vaadin.elements.mixins.InteractionsMixin;
import com.github.fluorumlabs.disconnect.vaadin.elements.mixins.ThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.MenuItem;
import js.util.collections.Array;
import js.web.dom.HTMLElement;
import org.teavm.jso.JSByRef;
import org.teavm.jso.JSProperty;

/**
 * <vaadin-menu-bar> is a Web Component providing a set of horizontally stacked buttons offering
 * the user quick access to a consistent set of commands. Each button can toggle a submenu with
 * support for additional levels of nested menus.
 * 
 * To create the menu bar, first add the component to the page:
 *
 * 
<vaadin-menu-bar></vaadin-menu-bar>
 * 
 * And then use items
 * property to initialize the structure:
 *
 * document.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];
 * 
 * Styling
 * The following shadow DOM parts are exposed for styling:
 *
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Part name Description
container The container wrapping menu bar buttons.
menu-bar-button The menu bar button.
overflow-button The "overflow" button appearing when menu bar width is not
 * enough to fit all the buttons.
 * See
 * ThemableMixin – how to apply styles for shadow parts
 */
@NpmPackage(
		name = "@vaadin/vaadin",
		version = Vaadin.VERSION
)
@Import(

		module = "@vaadin/vaadin-menu-bar/theme/lumo/vaadin-menu-bar.js"
)
public interface MenuBarElement extends HTMLElement, ButtonsMixin, InteractionsMixin, ElementMixin, ThemableMixin {
	static String TAGNAME() {
		return "vaadin-menu-bar";
	}

	/**
	 * Defines a hierarchical structure, where root level items represent menu bar buttons,
	 * and children property configures a submenu with items to be opened below
	 * the button on click, Enter, Space, Up and Down arrow keys.
	 *
	 * Example
	 * menubar.items = [
	 *   {
	 *     text: 'File',
	 *     children: [
	 *       {text: 'Open'}
	 *       {text: 'Auto Save', checked: true},
	 *     ]
	 *   },
	 *   {component: 'hr'},
	 *   {
	 *     text: 'Edit',
	 *     children: [
	 *       {text: 'Undo', disabled: true},
	 *       {text: 'Redo'}
	 *     ]
	 *   },
	 *   {text: 'Help'}
	 * ];
	 * 
	 */
	@JSProperty
	Array getItems();

	/**
	 * Defines a hierarchical structure, where root level items represent menu bar buttons,
	 * and children property configures a submenu with items to be opened below
	 * the button on click, Enter, Space, Up and Down arrow keys.
	 *
	 * Example
	 * menubar.items = [
	 *   {
	 *     text: 'File',
	 *     children: [
	 *       {text: 'Open'}
	 *       {text: 'Auto Save', checked: true},
	 *     ]
	 *   },
	 *   {component: 'hr'},
	 *   {
	 *     text: 'Edit',
	 *     children: [
	 *       {text: 'Undo', disabled: true},
	 *       {text: 'Redo'}
	 *     ]
	 *   },
	 *   {text: 'Help'}
	 * ];
	 * 
	 */
	@JSProperty
	void setItems(MenuItem... items);

	@JSProperty
	void setItems(Array items);
}

Part name	Description
`container`	The container wrapping menu bar buttons.
`menu-bar-button`	The menu bar button.
`overflow-button`	The "overflow" button appearing when menu bar width is not * enough to fit all the buttons.