Search results

How To

Customize the appearance of a Switch

You can customize the appearance of the Switch component using the CSS rules. Define your own CSS rules according to your requirement and assign the class name to the cssClass property.

Customize Switch bar and handle

Switch bar and handle can be customized as per requirement using CSS rules. Switch bar and handle customized using cssClass property. In the following sample, the border-radius CSS property for e-switch-inner and e-switch-handle elements was changed border radius circle to square shape.

tagHelper
default.cs
@section ControlsSection {
    <ejs-switch id="switch1" cssClass="square"></ejs-switch>
    <ejs-switch id="switch2" cssClass="custom-switch"></ejs-switch>
    <ejs-switch id="switch3" cssClass="handle-text"></ejs-switch>
}

<style>
/* Square Switch */
.e-switch-wrapper.square .e-switch-inner,
.e-switch-wrapper.square .e-switch-handle {
  border-radius: 0;
}

/* Customize Handle and Bar Switch */
.e-switch-wrapper.custom-switch {
  width: 50px;
  height: 24px;
}

.e-switch-wrapper.custom-switch .e-switch-handle {
  width: 20px;
  height: 16px;
}

.e-switch-wrapper.custom-switch .e-switch-inner,
.e-switch-wrapper.custom-switch .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.custom-switch .e-switch-handle.e-switch-active {
  left: 42px;
}

/* Customize Handle and Bar Switch */
.e-switch-wrapper.handle-text {
  width: 58px;
  height: 24px;
}

.e-switch-wrapper.handle-text .e-switch-handle {
  width: 26px;
  height: 20px;
  left: 2px;
  background-color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
  left: 46px;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.handle-text .e-switch-inner:after,
.e-switch-wrapper.handle-text .e-switch-inner:before {
  font-size: 10px;
  position: absolute;
  line-height: 21px;
  font-family: "Helvetica", sans-serif;
  z-index: 1;
  height: 100%;
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.e-switch-wrapper.handle-text .e-switch-inner:before {
  content: "OFF";
  color:#e3165b;
  left: 3px;
}

.e-switch-wrapper.handle-text .e-switch-inner:after{
  content: "ON";
  right: 5px;
  color: #fff;
}

input[class$='e-switch']:checked + .e-switch-inner:before {
  color: #fff;
}

input[class$='e-switch']:checked + .e-switch-inner:after {
  color: #4d841d;
}
</style>
public IActionResult Default()
    {
            return View();
    }

Color the Switch

Switch colors can be customized as per the requirement using CSS rules. Switch bar and handle colors customized using cssClass property. In the following sample, the e-switch-inner and e-switch-off elements background and border colors were changed from default colors.

tagHelper
default.cs
@section ControlsSection {
    <ejs-switch id="switch1" cssClass="bar-color"></ejs-switch>
    <ejs-switch id="switch2" cssClass="handle-color"></ejs-switch>
    <ejs-switch id="switch3" cssClass="custom-iOS"></ejs-switch>
}

<styles>
/* Custom color Switch */
.e-switch-wrapper.bar-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.bar-color:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.bar-color .e-switch-inner,
.e-switch-wrapper.bar-color .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.bar-color .e-switch-handle {
  background-color: #fff;
}

/* handle color Switch */
.e-switch-wrapper.handle-color .e-switch-handle {
  background-color: #e3165b;
}

.e-switch-wrapper.handle-color .e-switch-handle.e-switch-active {
  background-color: #4d841d
}

.e-switch-wrapper.handle-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-color:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #fff;
  border-color: #ccc;
}

.e-switch-wrapper.handle-color .e-switch-inner,
.e-switch-wrapper.handle-color .e-switch-off {
  background-color: #fff;
  border-color: #ccc;
}

/* iOS Switch */
.e-switch-wrapper.custom-iOS .e-switch-inner.e-switch-active,
.e-switch-wrapper.custom-iOS:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #3df865;
  border-color: #3df665;
}

.e-switch-wrapper.custom-iOS {
  width: 42px;
  height: 24px;
}

.e-switch-wrapper.custom-iOS .e-switch-handle {
  width: 20px;
  height: 20px;
}

.e-switch-wrapper.custom-iOS .e-switch-handle.e-switch-active {
  margin-left: -22px;
} 
</styles>
public IActionResult Default()
    {
            return View();
    }

Change Size

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.

tagHelper
default.cs
@section ControlsSection {
    <div id='container'>
        <table class='size'>
            <tr>
                <td class='lSize'>Small</td>
                <td>
                    <ejs-switch id="switch1" cssClass="e-small"></ejs-switch>
                </td>
            </tr>
            <tr>
                <td class='lSize'>Default</td>
                <td>
                   <ejs-switch id="switch2"></ejs-switch>
                </td>
            </tr>   
        </table>
    </div>
}

<style>
#container {
    visibility: hidden;
    margin-left: 10px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
</style>
public IActionResult Default()
    {
            return View();
    }

Set disabled state

Switch can be disabled by setting the disabled property to true.

The following example illustrates how to disable support in Switch component.

tagHelper
default.cs
<ejs-switch id="default" disabled="true"></ejs-switch>
public IActionResult Default()
    {
            return View();
    }

Enable ripple for Switch label

By default, label with ripple effect is not available in Switch. You can achieve this using rippleMouseHandler method. The following example illustrates how to enable ripple effect for labels in Switch component.

tagHelper
default.cs
@section ControlsSection {
    <div id='container'>
        <table class='size'>
            <tr>
                <td class='lSize'><label for='switch1'>USB Tethering</label></td>
                <td>
                   <ejs-switch id="switch1"></ejs-switch>
                </td>
            </tr>
        </table>
    </div>
}

<style>
#container {
    visibility: hidden;
    margin-left: 10px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.e-switch-wrapper {
  margin-top: 18px;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  padding-top: 24px;  
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

.size .lSize label{
  cursor: pointer;
  user-select: none;
}

</style>
public IActionResult Default()
    {
            return View();
    }

Enable RTL

Switch component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in Switch component.

tagHelper
default.cs
<ejs-switch id="default" enableRtl="true"></ejs-switch>
public IActionResult Default()
    {
            return View();
    }

Submit name and value in form

The name attribute of the Switch is used to group Switches. When the Switches are grouped in form, the checked items value attribute will post to the server on form submit. The disabled and unchecked Switch values will not be sent to the server on form submit.

In the following code snippet, USB and Wi-Fi in the checked state, and Bluetooth is in disabled state. Values that are in checked state only be sent on form submit.

tagHelper
default.cs
@section ControlsSection {
        <div id='container'>
        <form>
            <table class='size'>
                <tr>
                    <td class='lSize'>USB</td>
                    <td>
                        <ejs-switch id="switch1" checked="true"></ejs-switch>
                    </td>
                </tr>
                <tr>
                    <td class='lSize'>Wi-Fi</td>
                    <td>
                        <ejs-switch id="switch2" checked="true"></ejs-switch>
                    </td>
                </tr>
                <tr>
                    <td class='lSize'>Bluetooth</td>
                    <td>
                        <ejs-switch id="switch3"></ejs-switch>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ejs-button id="btnElement" ></ejs-button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
}

<style>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

button {
  margin: 20px 0 0 5px;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

.size .lSize label {
  user-select: none;
} 
</style>
public IActionResult Default()
    {
            return View();
    }