DxLayoutBreakpoint Class

A layout breakpoint.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxLayoutBreakpoint :
    DxComponentBase,
    IModelWrapper<ILayoutBreakpointModel>

Remarks

<DxLayoutBreakpoint> allows you to adapt a page layout to different screen sizes. For example, you can use breakpoints to create responsive DxGridLayout, DxStackLayout, or any other components.

Add a Layout Breakpoint to a Project

To add a <DxLayoutBreakpoint> component to a page, follow the steps below:

  1. Create an application. If you use Microsoft project templates, configure the application as described in this topic: Microsoft Templates.
  2. Add the <DxLayoutBreakpoint /> markup to a page.
  3. Use the DeviceSize or MinWidth/MaxWidth property to specify the screen size when the breakpoint should be activated.
  4. Use the @bind attribute to bind the breakpoint's IsActive property to a data field.
  5. Use this data field in components that should be adapted.

The following example demonstrates how to use a layout breakpoint to create an adaptive DxGridLayout:

<DxLayoutBreakpoint DeviceSize="DeviceSize.XSmall" @bind-IsActive="@IsXSmallScreen" />

<DxGridLayout CssClass="h-100" ColumnSpacing="8px" RowSpacing="8px">
    <Rows>
        <DxGridLayoutRow />
        <DxGridLayoutRow />
        <DxGridLayoutRow />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
    </Columns>
    <Items>
        <DxGridLayoutItem Row="0" Column="0" ColumnSpan="2" RowSpan="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-header gridlayout-item">
                    Item 1
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 1 : 2" Column="0" ColumnSpan="2">
            <Template>
                <div class="center gridlayout-content gridlayout-item">
                    Item 2
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 2 : 0" Column="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-left-side-bar gridlayout-item">
                    Item 3
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 3 : 1" Column="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-right-side-bar gridlayout-item">
                    Item 4
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 4 : 0" Column="IsXSmallScreen ? 0 : 3" RowSpan="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-footer gridlayout-item">
                    Item 5
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 5 : 2" Column="IsXSmallScreen ? 0 : 2" ColumnSpan="2">
            <Template>
                <div class="center gridlayout-left-side-bar gridlayout-item">
                    Item 6
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

@code {
    bool IsXSmallScreen { get; set; }
}

Adaptive Grid Layout

Run Demo: Grid Layout - Adaptivity

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxLayoutBreakpoint
See Also