DxToolbarItemBase.Alignment Property

Specifies the item’s position.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v23.2.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>

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>