Skip to main content

DxToolbarItemBase.Alignment Property

Specifies the item’s position.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ToolbarItemAlignment.Left)]
[Parameter]
public ToolbarItemAlignment Alignment { get; set; }

Property Value

Type Default Description
ToolbarItemAlignment Left

A ToolbarItemAlignment enumeration value.

Available values:

Name Description
Left

The item is aligned to the left of the underlying container.

Right

The item is aligned to the right of the underlying container.

Remarks

The Toolbar stretches to the container width. Use the item’s Alignment property to specify the item’s alignment (to the left or to the right) relative to the container boundaries.

Note

When you specify the Alignment property, the item order in markup is taken into account only for the items with the same property value (alignment).

<DxToolbar>
    <DxToolbarItem Text="Insert"  Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>
    <DxToolbarItem Text="Edit" Alignment="ToolbarItemAlignment.Left"></DxToolbarItem>
    <DxToolbarItem Text="Delete" Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>
</DxToolbar>

Toolbar Item Alignment

If you divide Toolbar items into groups, the component aligns grouped items according to the group first item’s Alignment property value.

<div class="card p-2">
    <DxToolbar>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDown" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       Alignment="ToolbarItemAlignment.Right" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />
    </DxToolbar>
</div>

Toolbar Overview

See Also