DxToolbarBase.ItemSizeMode Property

Specifies the Toolbar item's size.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
[DefaultValue(null)]
public SizeMode? ItemSizeMode { get; set; }

Property Value

Type Default Description
Nullable<SizeMode>

null

A SizeMode enumeration value.

Remarks

Use the ItemSizeMode property to specify the size of Toolbar items.

The following size modes are available:

Size mode

Description

Not specified (NULL)

Toolbar item's's inner components inherit their sizes from Toolbar's parent component. For example, if Toolbar is in Data Grid's header template, Toolbar's inner component size is controlled by the InnerComponentSizeMode property.
If the parent component's size mode is not specified, Toolbar item's's inner component size is specified by the SizeMode global option.

Large

The size of Toolbar item's's inner components is large.

Medium

The size of Toolbar item's's inner components is medium.

Small

The size of Toolbar item's's inner components is small.

The code below applies different size modes to Toolbar items.

<DxToolbar ItemSizeMode="SizeMode.Small">
    <Items>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to demos"
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />

        <DxToolbarItem Name="Documentation" 
                       Text="Documentation" 
                       BeginGroup="true" 
                       Tooltip="Documentation (opened in a new tab)"
                       Alignment="ToolbarItemAlignment.Right" 
                       NavigateUrl="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar"
                       target="_blank" />
    </Items>
</DxToolbar>

<DxToolbar ItemSizeMode="SizeMode.Medium">
    <Items>
        ...
    </Items>
</DxToolbar>

<DxToolbar ItemSizeMode="SizeMode.Large">
    <Items>
        ...
    </Items>
</DxToolbar>

For more information, refer to Size Modes.

NOTE

Online Demo: Toolbar - Overview

See Also