Directory

← Back

Window Header Extension

Add customisable buttons to Vaadin Window header bar

Author

Contributors

Rating

Extension for adding buttons with customisable icons, tooltips, aria-labels, and functionalities to Window header bar.

Version 1.x for Vaadin 7.7.x: FontAwesome icons are supported
Version 2.x for Vaadin 8.x Both VaadinIcons and (deprecated) FontAwesome icons are supported.

Sample code

Window window = new Window();
WindowHeaderExtension.extend(window, FontAwesome.APPLE, "tooltip text", new WindowButtonClickListener() {

	@Override
	public void buttonClicked() {
		// do stuff
	}
}, "aria label for button");
UI.getCurrent().addWindow(window);
Window window = new Window();
WindowHeaderExtension.extend(window, VaadinIcons.WRENCH, () -> {
        // do stuff
});

WindowHeaderExtension.extend(window, VaadinIcons.ACCESSIBILITY, "tooltip text", () -> {
        // do stuff
}, "aria label of button");

UI.getCurrent().addWindow(window);
.windowheader-button:hover {
	color: red;
}
.demo .windowheader-button:focus::after, .demo .v-windowheader-button:focus::after {
	-webkit-box-shadow: 0 0 0 2px rgba(255, 141, 141, 0.5);
	box-shadow: 0 0 0 2px rgba(255, 141, 141, 0.5);
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Accessibility fixes, e.g.

  • Make buttons focusable and enable keyboard navigation
  • Listen for keyup event on enter/space key on buttons
  • Add aria-label for buttons
Breaking change: if tooltip is set, also aria-label has to be set.
Released
2019-04-01
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.7+ in 1.1.0
Browser
Browser Independent
Online