DxStackLayoutItem.CssClass Property

Specifies the name of a CSS class applied to a layout item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
String	The CSS class name.

Remarks

Assign a CSS class name to the CssClass property to define the appearance of the layout item.

Razor

<DxStackLayout>
    <Items>
        <DxStackLayoutItem Length="300" CssClass="stacklayout-item">
            <Template>
                ...
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr" CssClass="stacklayout-item">
            <Template>
                ...
            </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;
}