DxToolbar.ItemSizeMode Property
Specifies the Toolbar item’s size.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v20.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public SizeMode? ItemSizeMode { 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 ItemSizeMode property to specify the size of root Toolbar items.
The following size modes are available:
Size mode | Description |
---|---|
Not specified (NULL) | Toolbar item’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. |
Large | The size of Toolbar item’s inner components is large. |
Medium | The size of Toolbar item’s inner components is medium. |
Small | The size of Toolbar item’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.