Simple extension to bind CSS Media query in Java, help to build responsive UI

Feature 1

Add CustomMediaQuery in your view with a action and a Media query. When the result of the CSS media query result changed, call the action. This helps to build responsive UI from the Java side. For example, you can show a component only if the width of the view is less than 800px.

Use Case

Display or hide a column for a Vaadin Grid if screen size < 1000px

Feature 2

Use ClientMediaQuery to update your styles from Java.

Feature 3

ElementMediaQuery is similar to CustomMediaQuery but you can apply the Media Query to an element. For example, you can show a component only if the width of the component is less than 800px. It's based on ResizeObserver so not working in Internet Explorer 11. https://caniuse.com/#feat=resizeobserver It's heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript.

You can find an example in github.

Install

Link to this version
ExperimentalReleased 26 August 2020Apache License 2.0
Framework Support
Vaadin platform 14+
Install with
Release notes - Version 4.0.1

Fix a bug for the initial version of the Element Media Query, add a new demo