MediaQuery
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.
Sample code
@Route("") public class DemoView extends VerticalLayout { private final Grid<Person> grid; public DemoView() { List<Person> persons = new ArrayList<>(); for (int i = 0; i<20; i++) { persons.add(new Person("name"+i, "surname"+i, "ES")); } grid = new Grid<>(Person.class); grid.setItems(persons); expand(grid); CustomMediaQuery customMediaQuery1200 = new CustomMediaQuery(this::toggleColumnCountry); CustomMediaQuery customMediaQuery800 = new CustomMediaQuery(this::toggleColumnSurname); add(new H1("Grid")); add(customMediaQuery1200, customMediaQuery800, grid); customMediaQuery1200.setQuery("(min-width: 1200px)"); customMediaQuery800.setQuery("(min-width: 800px)"); } private void toggleColumnCountry(boolean visible){ grid.getColumnByKey("country").setVisible(visible); } private void toggleColumnSurname(boolean visible){ grid.getColumnByKey("surname").setVisible(visible); } public class Person { private String name; private String surname; private String country; public Person(String name, String surname, String country) { this.name = name; this.surname = surname; this.country = country; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSurname() { return surname; } public void setSurname(String surname) { this.surname = surname; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } @Override public String toString() { return "Person{" + "name='" + name + '\'' + ", surname='" + surname + '\'' + ", country='" + country + '\'' + '}'; } } }
Div div = new Div(); div.setWidth("200px"); div.setHeight("200px"); ClientMediaQuery clientMediaQuery1200 = new ClientMediaQuery(div); ClientMediaQuery clientMediaQuery800 = new ClientMediaQuery(div); ClientMediaQuery clientMediaQuery0 = new ClientMediaQuery(div); clientMediaQuery1200.setQuery(new MediaQuery(new MinWidth("1200px"))); clientMediaQuery800.setQuery(new MediaQuery(new MinWidth("800px"),new MaxWidth("1200px"))); clientMediaQuery0.setQuery(new MediaQuery(new MaxWidth("800px"))); clientMediaQuery1200.getQueryStyle().set("background","green"); clientMediaQuery800.getQueryStyle().set("background","blue"); clientMediaQuery0.getQueryStyle().set("background","red");
/**Change the color of a div is the window size < 1024px and div width < 300px **/ @Route("mediaquery") public class MediaQueryView extends VerticalLayout { private boolean div300pxOrLess = false; private boolean window1024OrLess = false; private Div div; private Span textWindow; private Span textDiv; public MediaQueryView() { setSizeFull(); div = new Div(); div.setWidth("50%"); div.setHeight("100px"); textWindow = new Span("window1024OrLess"); textDiv = new Span("div300pxOrLess"); add(div, textWindow, textDiv); CustomMediaQuery customMediaQuery1024 = new CustomMediaQuery(this::updateWindows1024OrLess); add(customMediaQuery1024); customMediaQuery1024.setQuery(new MediaQuery(new WidthAttributes.MaxWidth("1024px"))); ElementMediaQuery elementMediaQuery300 = new ElementMediaQuery(this::updateDiv300OrLess); elementMediaQuery300.setElement(div); elementMediaQuery300.setQuery(new MediaQuery(new WidthAttributes.MaxWidth("300px"))); add(elementMediaQuery300); } private void updateWindows1024OrLess(Boolean window1024OrLess) { this.window1024OrLess = window1024OrLess; textWindow.setVisible(window1024OrLess); updateCondition(); } private void updateDiv300OrLess(Boolean div300pxOrLess) { this.div300pxOrLess = div300pxOrLess; textDiv.setVisible(div300pxOrLess); updateCondition(); } private void updateCondition() { if (window1024OrLess && div300pxOrLess) { div.getStyle().set("background-color", "green"); } else { div.getStyle().set("background-color", "red"); } } }
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
Fix a bug for the initial version of the Element Media Query, add a new demo
- Released
- 2020-08-26
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14+
- Vaadin 24 in 5.0.3
- Vaadin 23 in 5.0.3
- Vaadin 14 in 2.0.0
- Vaadin 10+ in 2.0.2
- Vaadin 12+ in 2.0.3
- Browser
- N/A
MediaQuery - Vaadin Add-on Directory
Simple extension to bind CSS Media query in Java, help to build responsive UIIssue tracker
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 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