Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxToolbar.SizeMode Property

Specifies the size of the Toolbar and its inner components.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

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

#Property Value

Type Default Description
Nullable<SizeMode> null

A SizeMode enumeration value.

Available values:

Name Description
Small

Small size.

Medium

Medium size.

Large

Large size.

#Remarks

Use the SizeMode property to specify the size of Toolbar and its inner components.

Size mode

Description

Not specified (NULL)

Toolbar and its inner components inherit their sizes from the Toolbar’s parent component. If the parent component’s size mode is not specified, Toolbar’s size is specified by the SizeMode global option.

Large

The size of Toolbar and its inner components is large.

Medium

The size of Toolbar and its inner components is medium.

Small

The size of Toolbar and its inner components is small.

The following code snippet applies the Large option to Toolbar items:

Razor
<div class="card p-2">
    <DxToolbar SizeMode="SizeMode.Large">
        <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>
</div>

For more information, refer to Size Modes.

Run Demo: Toolbar - Overview

See Also