Positions in React Speed dial component

23 May 202311 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

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

function App() {
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

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

function App() {
  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' 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%;
}

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

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

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=>
            <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'));

app.tsx

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

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=>
        <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'));

index.css

/* 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

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

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=>
      <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'));

app.tsx

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

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=>
        <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'));

index.css

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