Lightning Web Components Making Width Aware

Let us discuss here how to define the lightning web component width aware of the screen. When building web apps, it is sometimes advantageous for components to have awareness of their size and position on the screen. This is useful both for rendering content initially, but also for components that need to know when their size changes. When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at runtime. This example will display the opportunity table and adding different boards based on width as shown below.

In the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page. the flexipageRegionWidth will return SMALL ,MEDIUM ,LARGE values

 

Step 1: Create an Apex Class

Create a simple apex class that queries the opportunity and return the data. run the following command from the SFDX

Here is the complete code for apex class

 

Step 2: Create a lightning web component

Create a Lightning web component by using the following SFDX command

Here is the RegionEx.html markup code which will display the opportunity table.

Here is the RegionEx.js JavaScript controller.I n the component’s JavaScript class, use the @api decorator to create a public flexipageRegionWidth property. This property receives the width value of the region that the component resides in on the page.

 

Here are the RegionEx.css styles that we will used  based on the region

Here is the RegionEx.js-meta.xml

 

Step 3: Push Changes to Scratch Org 

Now push the changes using this SFDX command

Add the Lightning web component to the record page and you can able to see the styles based on the region width of the page as shown below.