Search results

Enable ripple for Switch label in Vue Switch component

14 Oct 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.

Source
Preview
app.vue
Copied to clipboard
<template>
    <table class='switch-control'>
        <tr>
            <td class='lSize'><label for='switch1'>USB Tethering</label></td>
            <td>
                <ejs-switch id="switch1"></ejs-switch>
            </td>
        </tr>
    </table>
</template>

<script>
import Vue from 'vue';
import { SwitchPlugin } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
import { rippleMouseHandler } from '@syncfusion/ej2-buttons';

enableRipple(true);
Vue.use(SwitchPlugin);

export default {
    mounted: function(){
        var elemArray = document.querySelectorAll('.switch-control label');
        for (var i = 0, len = elemArray.length; i < len; i++) {
            elemArray[i].addEventListener('mouseup', rippleHandler);
            elemArray[i].addEventListener('mousedown', rippleHandler);
        }
        function rippleHandler(e) {
            var rippleSpan = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
            rippleSpan && rippleMouseHandler(e, rippleSpan);
        }
    }
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fabric.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";

.switch-control tr td {
  padding: 10px;
}

.switch-control .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
</style>