DxStackLayout.Items Property

Specifies the stack layout’s item collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Items { get; set; }

Property Value

Type	Description
RenderFragment	A collection of items (UI fragment) that is rendered in the stack layout’s markup.

Remarks

Use the Items property to define a collection of items in the DxStackLayout component.

Razor

<DxStackLayout Orientation="Orientation.Horizontal">
    <Items>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-header stacklayout-item">
                    Item 1
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr">
            <Template>
                <div class="stacklayout-content stacklayout-item">
                    Item 2
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-left-side-bar stacklayout-item">
                    Item 3
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-right-side-bar stacklayout-item">
                    Item 4
                </div> 
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-footer stacklayout-item">
                    Item 5
                </div>
            </Template>
        </DxStackLayoutItem>
    </Items>
</DxStackLayout>

CSS

.stacklayout-item {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    height: 100%;
    padding-top: 10px;
    text-align: center;
    position: relative;
    z-index: 0;
}

.stacklayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.6;
}

.stacklayout-header:before {
    background-color: var(--bs-red);
}

.stacklayout-content:before {
    background-color: var(--bs-yellow);
}

.stacklayout-left-side-bar:before {
    background-color: var(--bs-green);
}

.stacklayout-right-side-bar:before {
    background-color: var(--bs-info);
}

.stacklayout-footer:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

Run Demo Watch Video