DxToolbarItemBase.Alignment Property

Specifies the item's position.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

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

Property Value

Type Default Description
ToolbarItemAlignment

Left

A ToolbarItemAlignment enumeration value that specifies the item's alignment.

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.

<DxToolbar>
    <DxToolbarItem Text="Item" />
    <DxToolbarItem Text="Link to the next demo" 
                   NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDownItems" />
    <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>

Toolbar Overview

NOTE

Online Demo: Toolbar - Overview

See Also