How to implement a responsive CardView component in Blazor

This example demonstrates how to use DevExpress Blazor components to implement the CardView component's functionality. The main idea of the solution is to combine the following components and imitate CardView:

• DxGridLayout to arrange data items as cards.
• DxFormLayout to specify card content.
• DxPager to implement navigation between pages.
• DxLayoutBreakpoint to make a layout responsive.

Three break points allow you to determine the current screen size:

<DxLayoutBreakpoint MinWidth="0" MaxWidth="576" @bind-IsActive="@isXsScreen" />
<DxLayoutBreakpoint MinWidth="576" MaxWidth="768" @bind-IsActive="@isSmScreen" />
<DxLayoutBreakpoint MinWidth="769" @bind-IsActive="@isLargeScreen" />

The number of rows and columns in the DxGridLayout component is defined based on these break points.

Each item's position (the DxGridLayoutItem.Row and DxGridLayoutItem.Column propeties) is calculated based on the page size, the active page index and the number of rows and columns in the component.

The component recalculates these parameters after screen size changes and another break point becomes active.

Files to look at

Index.razor

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)