This component has 3 properties to look at:
- propertyName: Name of the property we want to change
- matchedPropertyValue: New value of the property
- mediaQuery: Here we can set the condition by defining a CSS media query. You can learn more about it here: CSS Media Queries
In this example I am going to use a simple form based on Employees view object from HR Schema.
We are going to change the number of rows of the panelFormLayout to 7 when the screen with is less than 900px and we will change it to 15 if the with is less than 750px.
As you can see by default the form is displayed like this:
If we make the screen smaller we can see that the layout is changing (you can see the with of the screen at the top right corner of the images)