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.
@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.
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
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.