Template in React Speed dial component

2 Mar 20269 minutes to read

SpeedDial provides powerful templating capabilities to customize both individual action items and the entire popup container. Use templates to create complex layouts with custom HTML, styling, and interactive elements beyond the standard text and icon configurations.

Item template

Customize the appearance and content of individual action items using the itemTemplate property. Define custom HTML markup as child content within the itemTemplate directive to create rich, interactive item layouts with images, badges, custom styling, or nested components.

app.jsx

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    const items = [
        { iconCss: 'e-icons e-cut', text: 'Cut' },
        { iconCss: 'e-icons e-copy', text: 'Copy' },
        { iconCss: 'e-icons e-paste', text: 'Paste' }
    ];
    function itemTemplate(props) {
        let classname = "icon " + props.properties.iconCss;
        return (<div className="itemlist">
            <span className={classname}></span>
            <span className="text">{props.properties.text}</span>
        </div>);
    }
    return (<div>
        <div id="targetElement" style=></div>
        {/* Initialize the SpeedDial component */}
        <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' content="Edit" items={items} itemTemplate={itemTemplate} target="#targetElement"></SpeedDialComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut', text: 'Cut' },
    { iconCss: 'e-icons e-copy', text: 'Copy' },
    { iconCss: 'e-icons e-paste', text: 'Paste' }
  ];

  function itemTemplate(props: any): JSX.Element {
    let classname: string = "icon " + props.properties.iconCss;
    return (
      <div className="itemlist">
        <span className={classname}></span>
        <span className="text">{props.properties.text}</span>
      </div>);
  }

  return (
    <div>
      <div id="targetElement" style=></div>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' content="Edit" items={items} itemTemplate={itemTemplate} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for speeddial list items */
.itemlist .text {
  padding: 0 5px;
}

.e-speeddial-li .itemlist {
  display: inherit;
  width: 100%;
  border: 1px solid transparent;
  align-items: center;
  padding: 5px;
  border-radius: 500px;
  background-color: rgba(104, 99, 104, 0.1);
  box-shadow: 0 0 4px grey;
}

.e-speeddial-li .itemlist:hover {
  background-color: rgb(224, 224, 224);
}

Popup template

Customize the entire popup container using the popupTemplate property. Define custom HTML markup as child content within the popupTemplate directive to create completely custom popup layouts, including custom item lists, headers, footers, or alternative content structures.

app.jsx

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    function popupTemplate() {
        return (<div>
            <div className="speeddial-form">
                <p>Here you can customize your code.</p>
            </div>
        </div>);
    }
    return (<div>
        <div id="targetElement" style=></div>
        {/* Initialize the SpeedDial component */}
        <SpeedDialComponent id='speeddial' content="Edit" popupTemplate={popupTemplate} target="#targetElement"></SpeedDialComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  function popupTemplate(): JSX.Element {
    return (
      <div>
        <div className="speeddial-form">
          <p>Here you can customize your code.</p>
        </div>
      </div>);
  }

  return (
    <div>
      <div id="targetElement" style=></div>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' content="Edit" popupTemplate={popupTemplate} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for speeddial-form */
.speeddial-form {
  width: 200px;
  height: 80px;
  text-align: center;
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
  background: #f5f5f5;
  padding: 15px;
}