Template in React Speed dial component

23 May 20239 minutes to read

This section explains available templates in SpeedDial component and its usage.

Item template

You can use the itemTemplate property to set a template content for the SpeedDial items. The template content is defined as a child content of itemTemplate tag directive.

{ /* Import the Speed Dial. */ }
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* To render Speed Dial.*/ }
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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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'));
{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Speed Dial.*/}
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={{position:'relative', minHeight:'350px', border:'1px solid'}}></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'));
/* 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);
}

You can use the popupTemplate property to set a template content for popup of SpeedDial component. The template content is defined as a child content of popupTemplate tag directive.

{ /* Import the Speed Dial. */ }
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* To render Speed Dial.*/ }
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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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'));
{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Speed Dial.*/}
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={{position:'relative', minHeight:'350px', border:'1px solid'}}></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'));
/* 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;
}