blazor-devexpress-dot-blazor-dot-dxtoolbar-13884ed3.md
Specifies the size of the Toolbar and its inner components.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(null)]
[Parameter]
public SizeMode? SizeMode { get; set; }
| Type | Default | Description |
|---|---|---|
| Nullable<SizeMode> | null |
A SizeMode enumeration value.
|
Available values:
| Name | Description |
|---|---|
| Small |
Small size.
| | Medium |
Medium size.
| | Large |
Large size.
|
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:
<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 additional information, refer to Size Modes.
See Also