Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The different Switch sizes available are default and small. To reduce the size of default Switch to small,
set the cssClass property to e-small.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<table class='size'>
<tr>
<td class='lSize'>Small</td>
<td>
<ejs-switch cssClass="e-small"></ejs-switch>
</td>
</tr>
<tr>
<td class='lSize'>Default</td>
<td>
<ejs-switch></ejs-switch>
</td>
</tr>
</table>`
})
export class AppComponent { }import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SwitchModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: "Helvetica Neue", "calibri";
font-size: 16px;
top: 45%;
left: 45%;
}
.size tr td {
padding: 10px;
}
.size .lSize {
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
font-size: 13px;
}