Positions in React Speed dial component

23 May 202312 minutes to read

The Speed dial control can be positioned anywhere on the target using the position property. If the target is not defined, then Speed Dial is positioned based on the browser viewport.

The position values of Speed Dial are as follows:

TopLeft
TopCenter
TopRight
MiddleLeft
MiddleCenter
MiddleRight
BottomLeft
BottomCenter
BottomRight

app.jsx
app.tsx
index.css
{ /* 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() {
    return (<div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
      <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' target="#targetElement"></SpeedDialComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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() {

  return (
    <div>
      <div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
      <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' 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%;
}

Opens items on hover

You can open the Speed Dial action items on mouse hover by setting the opensOnHover property.

{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];

  return (
    {/* Initialize the SpeedDial component. */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover= {true} target="#targetElement"></SpeedDialComponent>
  );
}
export default App;

Programmatically show/hide Speed Dial items

You can open/close the Speed Dial action items programmatically using show and hide methods.

Below example demonstrates open/close action items on button click.

app.jsx
app.tsx
index.css
{ /* Import the Speed Dial. */ }
import { ButtonComponent, SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* To render Speed Dial.*/ }
function App() {
    let speeddialObj;
    const items = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    function showClick() {
        speeddialObj.show();
    }
    function hideClick() {
        speeddialObj.hide();
    }
    return (<div>
        <div id="targetElement" style={{ position: 'relative', minHeight: '340px', border: '1px solid', padding: '10px' }}>
        <ButtonComponent id="show" cssClass="e-primary" onClick={showClick}> Show </ButtonComponent>
        <ButtonComponent id="hide" cssClass="e-primary" onClick={hideClick}> Hide </ButtonComponent></div>
        <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement" ref={(scope) => { speeddialObj = scope; }}></SpeedDialComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* Import the Speed Dial. */}
import { ButtonComponent, SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Speed Dial.*/}
function App() {

  let speeddialObj: SpeedDialComponent;

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];

  function showClick() :void {
        speeddialObj.show();
    }
  function hideClick() :void {
        speeddialObj.hide();
    }

    return (
      <div>
        <div id="targetElement" style={{position:'relative', minHeight:'340px', border:'1px solid', padding:'10px'}}>
        <ButtonComponent id="show" cssClass="e-primary" onClick={ showClick }> Show </ButtonComponent>
        <ButtonComponent id="hide" cssClass="e-primary" onClick={ hideClick }> Hide </ButtonComponent></div>
        <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover= {true} target="#targetElement" ref={(scope) => { speeddialObj = scope; }}></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 button */
#hide{
  float: right;
}

Programmatically refresh the position

You can refresh the position of the Speed Dial using refreshPosition method when the targetposition is changed.

The following sample demonstrates the above functionalities of a Speed Dial to refresh the position of speed dial.

app.jsx
app.tsx
index.css
{ /* Import the Speed Dial. */ }
import { ButtonComponent, SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* To render Speed Dial.*/ }
function App() {
    let speeddialObj;
    const items = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    function refresh() {
        document.getElementById("targetElement").style.minHeight = "300px";
        speeddialObj.refreshPosition();
    }
    return (<div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '340px', border: '1px solid', padding: '10px' }}>
      <ButtonComponent id="refresh" cssClass="e-primary" onClick={refresh}> Refresh </ButtonComponent></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} position='MiddleRight' target="#targetElement" ref={scope => { speeddialObj = scope; }}></SpeedDialComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* Import the Speed Dial. */}
import { ButtonComponent, SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{/* To render Speed Dial.*/}
function App() {

  let speeddialObj: SpeedDialComponent;

  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];

  function refresh():void {
        document.getElementById("targetElement").style.minHeight = "300px";
        speeddialObj.refreshPosition();
    }

  return (
    <div>
      <div id="targetElement" style={{position:'relative', minHeight:'340px', border:'1px solid', padding:'10px'}}>
      <ButtonComponent id="refresh" cssClass="e-primary" onClick={refresh}> Refresh </ButtonComponent></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} position='MiddleRight' target="#targetElement" ref={scope =>{ speeddialObj = scope }}></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%;
}