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
#Property Value
Type | Default | Description |
---|---|---|
Nullable<Size |
null | A Size |
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 Size |
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 more information, refer to Size Modes.