DxLayoutBreakpoint Class

A component that allows you to adapt page layout to different window sizes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxLayoutBreakpoint :
    DxComponentBase,
    IModelWrapper<ILayoutBreakpointModel>

Remarks

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

Run Demo: Layout Breakpoint

Add a Layout Breakpoint to a Project

Follow the steps below to add the Layout Breakpoint component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
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.

Examples

Refer to the sections below for examples on how to use the Layout Breakpoint component in different scenarios.

Responsive Grid

In the following example, the breakpoint is activated when the screen is extra small. The Grid component hides its Contact Title and City columns:

Razor

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

<div class="h-100 grid-wrapper">
    @inject NwindDataService NwindDataService

    @if (isXSmallScreen) {
        <div class="fab-container">
            <DxButton RenderStyle="ButtonRenderStyle.Primary"
                IconCssClass="btn-column-chooser"
                CssClass="fab"
                Click="@ShowColumnChooser" />
        </div>
    } else {
        <div class="align-self-start p-2">
            <DxButton Text="Column Chooser"
                RenderStyle="ButtonRenderStyle.Secondary"
                IconCssClass="btn-column-chooser"
                Click="@ShowColumnChooser" />
        </div>
    }
    <DxGrid @ref="@Grid" CssClass="flexGrid" Data="@Data" VirtualScrollingEnabled="true">
            <Columns>
                <DxGridDataColumn FieldName="ContactName" MinWidth="80" />
                <DxGridDataColumn FieldName="ContactTitle" MinWidth="100" Visible="@GetExtraColumnsVisible()" />
                <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                <DxGridDataColumn FieldName="City" Width="15%" MinWidth="80" Visible="@GetExtraColumnsVisible()" />
                <DxGridDataColumn FieldName="Country" Width="10%" MinWidth="80" />
            </Columns>
    </DxGrid>
    @* ... *@
@code {
    bool isXSmallScreen;
    IGrid Grid { get; set; }
    IEnumerable<Supplier> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetSuppliersAsync();
    }

    void ShowColumnChooser() {
        Grid.ShowColumnChooser(new DialogDisplayOptions($".flexGrid", HorizontalAlignment.Center, VerticalAlignment.Center));
    }
    bool GetExtraColumnsVisible() { return !isXSmallScreen; }
}

CSS

.grid-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.btn-column-chooser {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
    background-color: currentColor;
}

.fab-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid {
    flex: 1 1 auto;
    overflow-y: auto;
}

Run Demo: Responsive Grid

Adaptive Grid Layout

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>
        @if(isXSmallScreen) {
            <DxGridLayoutRow Areas="item1" />
            <DxGridLayoutRow Areas="item2" />
            <DxGridLayoutRow Areas="item3" />
            <DxGridLayoutRow Areas="item4" />
            <DxGridLayoutRow Areas="item5" />
            <DxGridLayoutRow Areas="item6" />
        } else {
            <DxGridLayoutRow Areas="item1 item3 item5" />
            <DxGridLayoutRow Areas="item1 item4 item5"/>
            <DxGridLayoutRow Areas="item2 item6 item6"/>
        }
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr" />
        @if(!isXSmallScreen) {
            <DxGridLayoutColumn />
            <DxGridLayoutColumn />
        }
    </Columns>
    <Items>
        <DxGridLayoutItem Area="item1">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Item 1
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item2">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Item 2
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item3">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Item 3
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item4">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Item 4
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item5">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Item 5
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item6">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Item 6
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

@code {
    bool isXSmallScreen;
}

Run Demo: Grid Layout - Adaptivity

Run Demo: Card View

Watch Video

View Example: How to create an adaptive dashboard layout

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponentBase

DxLayoutBreakpoint