Window Header Extension
Add customisable buttons to Vaadin Window header bar
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); }
Links
Compatibility
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
- 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