Having trouble getting help?
Contact Support
Contact Support
Create dropdownbutton with rounded corner in EJ2 TypeScript Drop down button control
31 Aug 20233 minutes to read
DropDownButton with rounded corner can be achieved by adding border-radius
CSS property to button element.
In the following example, e-round-corner
class is defined with 5px
border-radius
property and added that class to button element using cssClass
property.
import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
//Initialize action items.
let items: ItemModel[] = [
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}];
// Initialize the DropDownButton component.
let drpDownBtn: DropDownButton = new DropDownButton({ items: items, cssClass: 'e-round-corner' });
// Render initialized DropDownButton.
drpDownBtn.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 DropDownButton</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'>
<button id='element'>Clipboard</button>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-round-corner {
border-radius: 5px;
}