Having trouble getting help?
Contact Support
Contact Support
Enable ripple in EJ2 TypeScript Button group control
10 May 20232 minutes to read
Ripple can be enabled by importing rippleEffect
method from ej2-base
and initialize rippleEffect with .e-btn-group
element, and selector as e-btn
.
The following example illustrates how to enable ripple for ButtonGroup.
import { rippleEffect, enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To enable ripple in ButtonGroup.
let button: HTMLElement = document.querySelector('.e-btn-group');
rippleEffect(button, { selector: '.e-btn' });
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Button-Group</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='buttongroup' class="e-btn-group">
<button class='e-btn'>HTML</button>
<button class='e-btn'>CSS</button>
<button class='e-btn'>Javascript</button>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-btn-group {
margin: 25px 5px 20px 20px;
}