Size Modes
- 2 minutes to read
In This Article
You can apply different size modes to DevExpress Blazor components and their elements.
Show Components That Support Size Modes
Control | API | What It Affects |
---|---|---|
Accordion | Size |
The entire control. |
AIChat | Size |
The control and its content. |
Button | Size |
The entire control. |
Button |
Size |
The entire control. |
Carousel | Size |
Navigation buttons. |
Context Menu | Size |
The entire control. |
Data Editors | Size |
The entire control. |
Drop |
Size |
The control and its content. |
Drop |
Size |
The control and its content. |
Drop |
Size |
The entire control. |
Drawer | Size |
The control and its content. |
Flyout | Size |
The control and its content. |
Grid | Size |
The control and its inner components. |
Form Layout | Size |
The control and its inner components. |
Loading Panel | Size |
The entire control without covered content. |
Menu | Size |
The entire control. |
Message Box | Size |
The control and its content. |
Pager | Size |
The entire control. |
PDF Viewer | Size |
Toolbar. |
Pivot Table | Size |
The control and its content. |
Popup | Size |
The control and its content. |
Progress Bar | Size |
The entire control. |
Ribbon | Size |
The entire control. |
Rich Edit | Global |
Toolbar, ribbon, dialogs, and context menu. |
Scheduler | Inner |
Toolbar, view selector, appointment form, and data editors. |
Split |
Size |
The entire control. |
Splitter | Size |
The control and its content. |
Tabs | Size |
The entire control. |
Toast Provider | Size |
Toast notifications and their content. |
Toolbar | Size |
The entire control. |
Tree |
Size |
The control and its inner components. |
Tree |
Size |
The entire control. |
Wait Indicator | Size |
The entire control. |
Window | Size |
The control and its content. |
#Example
The following code snippet applies different size modes to ComboBox components.
Razor
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Small" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Medium" />
<DxComboBox Data="@Cities" NullText="Select City ..." @bind-Value="@Value" SizeMode="SizeMode.Large" />
@code {
IEnumerable<string> Cities = new List<string>() {
"London",
"Berlin",
"Paris",
};
string Value { get; set; }
}
#Global Size Mode Property
Use the SizeMode application-wide option to specify the size mode for DevExpress Blazor components that support size modes. Individual component settings override this option.
You can specify a size mode in the Blazor Project Wizard.
The wizard adds the SizeMode
global option in the Program.cs file.
builder.Services.AddDevExpressBlazor(options => {
options.SizeMode = DevExpress.Blazor.SizeMode.Small;
});