Size Mode for Blazor Components
14 Mar 20235 minutes to read
Syncfusion Blazor components supports touch (bigger theme) and normal size modes. The following topics explain how to enable the same in your application.
Size mode for application
You can enable touch mode (bigger theme) for an application by adding .e-bigger
class in ~/wwwroot/css/site.css
file and assign to the body
as follows,
- For Blazor WebAssembly application, assign
.e-bigger
class tobody
element of wwwroot/index.html file. - For Blazor Server application, assign
.e-bigger
class tobody
element of- ~/Pages/_Host.cshtml file for .NET 3 and .NET 5.
- ~/Pages/_Layout.cshtml for .NET 6.
.e-bigger {
font-size: x-large;
}
<body class="e-bigger">
...
</body>
Size mode for a control
You can enable touch mode (bigger theme) for a control by adding .e-bigger
class and assign to the div
which contains the control.
@page "/"
@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Popups;
<div class="e-bigger">
<SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar>
</div>
<div class="e-bigger">
<SfButton> Button </SfButton>
</div>
<div class="e-bigger">
<SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox>
</div>
<style>
.e-bigger {
font-size: x-large;
}
</style>
@code {
private bool isChecked = true;
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
}
Change size mode for application at runtime
You can change the size mode of an application between touch and normal (mouse) mode at runtime by adding and removing .e-bigger
using JavaScriptInterop
.
Follow below steps to change the size mode for an application at runtime.
-
Add the
e-bigger
CSS class in the~/wwwroot/css/site.css
file..e-bigger { font-size: x-large; }
-
Add the following JavaScript methods inside the script tag of
wwwroot/index.html
(Blazor WebAssembly App) orPages/_Host.cshtml
(Blazor Server App) to switch between touch and mouse mode usinge-bigger
class.<script> function onTouch() { document.body.classList.add('e-bigger'); } function onMouse() { document.body.classList.remove('e-bigger'); } </script>
-
To call JavaScript method from .NET, inject the
IJSRuntime
abstraction and callInvokeAsync
method as given in the below code,@page "/" @using Syncfusion.Blazor.Calendars; @using Syncfusion.Blazor.Buttons; @using Syncfusion.Blazor.Popups @inject IJSRuntime jsRuntime; <p> Size-modes for application </p> <p> This demo shows the Size-Modes applied for an entire application </p> <button @onclick="callOnTouch">Touch Mode</button> <button @onclick="callOnMouse">Mouse Mode</button> <div> <SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar> </div> <div> <SfButton> Button </SfButton> </div> <div> <SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox> </div> @code { private bool isChecked = true; private async void callOnTouch(MouseEventArgs args) { await jsRuntime.InvokeAsync<string>("onTouch"); } private async void callOnMouse(MouseEventArgs args) { await jsRuntime.InvokeAsync<string>("onMouse"); } }
NOTE
Change size mode for a control at runtime
You can change the size mode of a control between touch and normal (mouse) mode at runtime by setting .e-bigger
CSS class.
Refer to the following code, in which the e-bigger
class is added for enabling touch mode using the check
variable.
@page "/"
@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Popups;
<h2>Syncfusion Component Size-Modes</h2>
<button @onclick="OnTouch">Touch Mode</button>
<button @onclick="OnMouse">Mouse Mode</button>
<div class="@touchCSS">
<SfCalendar TValue="DateTime?" Value="@DateValue"></SfCalendar>
</div>
<div class="@touchCSS">
<SfButton> Button </SfButton>
</div>
<div class="@touchCSS">
<SfCheckBox Label="checked" @bind-Checked="isChecked"></SfCheckBox>
</div>
<style>
.e-bigger {
font-size: x-large;
}
</style>
@code {
private bool isChecked = true;
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
public string touchCSS { get; set; }
public void OnTouch()
{
touchCSS = "e-bigger";
}
public void OnMouse()
{
touchCSS = "";
}
}
NOTE
Change font size and font-family for all components
You can change the font-size and font-family for all the components by overriding the CSS for e-control
class as follows.
<style>
.e-control, [class^="e-"] *:not([class*="e-icon"]) {
font-size: 1rem !important;
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif !important;
}
</style>
See Also
Refer below topics to learn about responsiveness components based on available size in Syncfusion Blazor Components.