DxStackLayoutItem.Length Property

Specifies the length of the stack layout’s item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string Length { get; set; }

Property Value

Type	Description
String	A CSS unit that specifies the length of the stack layout’s item.

Remarks

The Length property accepts CSS units. For example, you can specify an item’s length in pixels, percentages, or set the property to auto. You can also use the fr unit.

The stack layout’s items whose length is specified with the fr unit are arranged last, since they occupy the remaining space (the space is divided between these items in proportion to the prefix number).

Razor

<DxStackLayout style="height:400px; width:950px" Orientation="Orientation.Horizontal">
    <Items>
        <DxStackLayoutItem Length="300">
            <Template>
                <div class="stacklayout-item1 stacklayout-item">
                    Item 1
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr">
            <Template>
                <div class="stacklayout-item2 stacklayout-item">
                    Item 2
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-item3 stacklayout-item">
                    Item 3
                </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-item1:before {
    background-color: var(--bs-red);
}

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

.stacklayout-item3:before {
    background-color: var(--bs-green);
}