Search results

Enable ripple for Switch label in ASP.NET Core Switch control

30 Nov 2021 / 1 minute 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.

tagHelper
default.cs
Copied to clipboard
<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>
Copied to clipboard
public ActionResult Default()
    {
            return View();
    }