Popup items in React Split button component

30 Jan 202312 minutes to read

Icons

The Popup action item have an icon or image to provide visual representation of the action. To place the icon on a popup item,set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the popup action item.

In the following sample, the icons for Cut, Copy, and Paste menu items are added using the iconCss property

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    let items = [
        {
            iconCss: 'e-sb-icons e-cut',
            text: 'Cut'
        },
        {
            iconCss: 'e-icons e-copy',
            text: 'Copy'
        },
        {
            iconCss: 'e-sb-icons e-paste',
            text: 'Paste'
        }
    ];
    return (<div>
      <SplitButtonComponent items={items} iconCss='e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ItemModel, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {

  let items: ItemModel[] = [
    {
      iconCss: 'e-sb-icons e-cut',
      text: 'Cut'
    },
    {
      iconCss: 'e-icons e-copy',
      text: 'Copy'
    },
    {
      iconCss: 'e-sb-icons e-paste',
      text: 'Paste'
    }];
  return (
  <div>
      <SplitButtonComponent items = {items} iconCss= 'e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Template

Item Templating

Popup items can be customized by using the beforeItemRender event. The item render event triggers while rendering each Popup action item. The event argument will be used to identify the action item and customize it based on the requirement.

import { createElement, enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    let items = [
        {
            text: 'Cut',
        },
        {
            text: 'Copy',
        },
        {
            text: 'Paste',
        }
    ];
    function itemBeforeEvent(args) {
        const shortCutSpan = createElement('span');
        const text = args.item.text;
        args.element.appendChild(shortCutSpan);
        shortCutSpan.setAttribute('class', 'shortcut');
        const clsName = (text === 'Copy') ? 'e-icons' : 'e-sb-icons';
        shortCutSpan.classList.add(clsName);
        (text === 'Cut') ? shortCutSpan.classList.add('e-cut') : (text === 'Paste') ? shortCutSpan.classList.add('e-paste') : shortCutSpan.classList.add('e-copy');
    }
    return (<div>
      <SplitButtonComponent items={items} beforeItemRender={itemBeforeEvent} iconCss='e-sb-icons e-paste'/>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { createElement, enableRipple } from '@syncfusion/ej2-base';
import { ItemModel, MenuEventArgs, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {

  let items: ItemModel[] = [
    {
        text: 'Cut',
    },
    {
        text: 'Copy',
    },
    {
        text: 'Paste',
    }];
  function itemBeforeEvent(args: MenuEventArgs): void {
      const shortCutSpan = createElement('span');
      const text = args.item.text;
      args.element.appendChild(shortCutSpan);
      shortCutSpan.setAttribute('class','shortcut');
      const clsName = (text === 'Copy') ? 'e-icons' : 'e-sb-icons';
      shortCutSpan.classList.add(clsName);
      (text === 'Cut') ? shortCutSpan.classList.add('e-cut') : (text === 'Paste') ? shortCutSpan.classList.add('e-paste') : shortCutSpan.classList.add('e-copy');
  }
  return (
  <div>
      <SplitButtonComponent items = {items} beforeItemRender= {itemBeforeEvent} iconCss= 'e-sb-icons e-paste'/>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

The whole popup can be customized as per the requirement. In the following example, the popup can be customized by handling it in target property.

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    return (<div>
        <div id='dropdowntarget'>
          <div id="first">
              <div id='black'/>
              <div id='red'/>
              <div id='green'/>
              <div id='gray'/>
              <div id='blue'/>
              <div id='violet'/>
              <div id='brown'/>
              <div id='darkgoldenrod'/>
              <div id='aquamarine'/>
          </div>
        </div>
        <SplitButtonComponent target='#dropdowntarget' iconCss='e-sb-icons e-color'/>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {
    return (
    <div>
        <div id='dropdowntarget'>
          <div id= "first">
              <div id='black'/>
              <div id='red'/>
              <div id='green'/>
              <div id='gray'/>
              <div id='blue'/>
              <div id='violet'/>
              <div id='brown'/>
              <div id='darkgoldenrod'/>
              <div id='aquamarine'/>
          </div>
        </div>
        <SplitButtonComponent target='#dropdowntarget' iconCss= 'e-sb-icons e-color'/>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

See Also