DxButtonGroup.Orientation Property

Specifies how button group items are arranged (horizontally or vertically).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(Orientation.Horizontal)]
[Parameter]
public Orientation Orientation { get; set; }

Property Value

Type	Default	Description
Orientation	Horizontal	An enumeration value.

Available values:

Name	Description
Horizontal	Sets horizontal orientation.
Vertical	Sets vertical orientation.

Remarks

The <DxButtonGroup> component arranges its items in a row (the orientation mode is Horizontal). Use the Orientation property to change the mode to Vertical.

Razor

<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
               Orientation="Orientation.Vertical">
    <Items>
        <DxButtonGroupItem Text="Add Task"
                           CssClass="justify-content-start"
                           IconCssClass="icon icon-plus" />
        <DxButtonGroupItem Text="Edit Task"
                           CssClass="justify-content-start"
                           IconCssClass="icon icon-edit" />
        <DxButtonGroupItem Text="Assign Task"
                           CssClass="justify-content-start"
                           IconCssClass="icon icon-user-profile" />
        <DxButtonGroupItem Text="Complete Task"
                           CssClass="justify-content-start"
                           IconCssClass="icon icon-check" />
        <DxButtonGroupItem Text="Archive Task"
                           CssClass="justify-content-start"
                           IconCssClass="icon icon-delete" />
    </Items>
</DxButtonGroup>

CSS

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}
.justify-content-start {
    justify-content: flex-start !important;
}