Make a Component Width-Aware

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 run time.

For example, the List View component renders differently in a large region than in a small region because it’s a width-aware component.

List view in large and small regions

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.

Use the flexipageRegionWidth property in the HTML template. When the value of flexipageRegionWidth changes, the component rerenders.

Use CSS to define the component’s behavior when it renders in different region widths. Valid CSS class values are SMALL, MEDIUM, and LARGE. This sample CSS snippet tells the component to render with a red background when it’s in a large region. It renders with a blue background when it’s in a small region.