Blazor Data Form Example - Adaptive Layout
This sample demonstrates the adaptive layout structure of the Blazor Data Form component. The form fields' dimensions dynamically adjust when the screen size changes or when rendered on various devices with differing screen dimensions. This feature can be implemented using the Blazor Media Query component.
Blazor Media Query consists of three breakpoints:
- Small screen size (less than or equal to 768px): Both the FormGroup and FormItems column will be singular.
- Medium screen size (between 768px and 1024px): The FormGroup column will be dual, and FormFields, if rendered with half the column size, will change to full width.
- Large screen size (greater than or equal to 1024px): Both the Form and FormGroup will consist of two columns; if the
ColumnSpanproperty is specified, the FormFields will also split.