MediaQuery - Vaadin Add-on Directory

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.

Source Code
Issue tracker

MediaQuery version 1.0.0

MediaQuery version 1.0.1
Add constructor param and check Vaadin 10 compatibility

MediaQuery version 1.0.2
Add ClientMediaQuery that allows applying client side media queries without a client -> server -> client roundtrip, by binding the element it to another element and setting it's css directly as soon as the media query `matches` . Thanks a lot for @appreciated for his pull request.

MediaQuery version 1.0.3

MediaQuery version 2.0.0
Update for Vaadin 14 - it should work in NPM and bower mode but only NPM tested. Update iron-media-query version 3.0.1 For Vaadin 10 to 13 use 1.0.3 version.

MediaQuery version 2.0.1
Remove warning when js is imported.

MediaQuery version 2.0.2
Upgrade json library version

MediaQuery version 2.0.3
Fix one issue with spring boot https://github.com/jcgueriaud1/custom-media-query/issues/4

MediaQuery version 3.0.0
Remove all the deprecated calls and HtmlImport. This version is working in Vaadin 14+, tested with Vaadin 14.2.0 and Vaadin 16.0.0.rc2. The compatibility mode support has been dropped. Use version 2.0.3 if you are using Vaadin 14 in compatibility mode.

MediaQuery version 4.0.0
Add ElementMediaQuery. 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.

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

MediaQuery version 4.0.2
Fix a javascript error when the element is not defined https://github.com/jcgueriaud1/custom-media-query/issues/9

MediaQuery version 5.0.2
Remove polymer template and dependencies. Now it's written in Lit.

MediaQuery version 5.0.3
Add null check for window.visualViewport