Having trouble getting help?
Contact Support
Contact Support
Enable ripple for Switch label
28 Feb 20222 minutes to read
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.
<div id='container'>
<table class='size'>
<tr>
<td><label for='switch1'>USB Tethering</label></td>
<td>
<ejs-switch id="switch1"></ejs-switch>
</td>
</tr>
</table>
</div>
<script>
ej.base.enableRipple(true)
// Function to handle ripple effect for Switch with label.
document.querySelector('label').addEventListener('mouseup', rippleHandler);
document.querySelector('label').addEventListener('mousedown', rippleHandler);
function rippleHandler(e) {
var rippleSpan = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
if (rippleSpan) {
ejs.buttons.rippleMouseHandler(e, rippleSpan);
}
}
</script>
<style>
.size td {
padding: 10px;
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
font-size: 13px;
}
.size td label {
cursor: pointer;
user-select: none;
}
</style>
public ActionResult Default()
{
return View();
}