DxLayoutBreakpoint.IsActive Property

Allows you to bind the breakpoint to a data source field. When the breakpoint is activated, the data field equals true.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp

[DefaultValue(false)]
[Parameter]
public bool IsActive { get; set; }

Property Value

Type	Default	Description
Boolean	false

true if the breakpoint is active; otherwise, false.

Remarks

Use the IsActive property to bind the breakpoint to a boolean data field. When the device screen size equals the DeviceSize property value, the breakpoint is activated. The IsActive property and the bound data field equal true.

Razor
CSS

razor

<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;
}

css

.gridlayout-item {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gridlayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.4;
}
.gridlayout-header:before {
    background-color: var(--dxds-color-surface-utility-red-default-rest);
}
.gridlayout-content:before {
    background-color: var(--dxds-color-surface-utility-yellow-default-rest);
}
.gridlayout-left-side-bar:before {
    background-color: var(--dxds-color-surface-utility-green-default-rest);
}
.gridlayout-right-side-bar:before {
    background-color: var(--dxds-color-surface-utility-purple-default-rest);
}
.gridlayout-footer:before {
    background-color: var(--dxds-color-surface-utility-blue-default-rest);
    opacity: 0.5;
}
@media (max-width: 575.98px) {
    .gridlayout-item {
        font-size: 0.9em;
    }
}

Run Demo: Grid Layout - Adaptivity

Run Demo: Card View

View Example: How to create an adaptive dashboard layout