com.github.fluorumlabs.disconnect.vaadin.MenuBar 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;

import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.vaadin.elements.MenuBarElement;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasButtonsMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasElementMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasInteractionsMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.ItemSelectedEvent;
import com.github.fluorumlabs.disconnect.vaadin.types.MenuItem;
import com.github.fluorumlabs.disconnect.zero.component.AbstractComponent;
import com.github.fluorumlabs.disconnect.zero.component.Component;
import com.github.fluorumlabs.disconnect.zero.component.HasComponents;
import com.github.fluorumlabs.disconnect.zero.component.HasStyle;
import com.github.fluorumlabs.disconnect.zero.observable.ObservableEvent;
import js.util.collections.Array;

/**
 * <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
 */
@WebComponent
public class MenuBar extends AbstractComponent
		implements HasButtonsMixin,
		HasInteractionsMixin,
		HasElementMixin,
		HasStyle, HasComponents> {
	public MenuBar() {
		super(MenuBarElement.TAGNAME());
	}

	/**
	 * 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'}
	 * ];
	 * 
	 */
	public Array items() {
		return getNode().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'}
	 * ];
	 * 
	 */
	public MenuBar items(MenuItem... items) {
		getNode().setItems(items);
		return this;
	}

	/**
	 * Fired when either a submenu item or menu bar button without nested children is clicked.
	 */
	public ObservableEvent> itemSelectedEvent() {
		return createEvent("item-selected");
	}
}

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.