React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Create DropDownButton with rounded corner in React DropDownButton component

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.

Source
Preview
app.tsx
index.html
styles.css
app.jsx
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
class App extends React.Component<{}, {}> {

  public items: ItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }];

  public render() {
    return (
    <div>
      <DropDownButtonComponent items = {this.items} cssClass='e-round-corner'>Clipboard</DropDownButtonComponent>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('button'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
    <div id='button'>
        <div id='loader'>Loading...</div>
    </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;
}
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.items = [
            {
                text: 'Cut'
            },
            {
                text: 'Copy'
            },
            {
                text: 'Paste'
            }
        ];
    }
    render() {
        return (<div>
      <DropDownButtonComponent items={this.items} cssClass='e-round-corner'>Clipboard</DropDownButtonComponent>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));
Previous
Next