The action items in React Speed Dial can be displayed in Linear and Radial display modes by setting mode property.
In Linear display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in Linear mode.
You can open the action items on the top, left, up, and down side of the Speed Dial button by setting direction property. The default value is Auto where the action items are displayed based on the positionof the Speed Dial.
The Linear directions of Speed Dial are as follows:
position of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top.{ /* 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' },
{ iconCss: 'e-icons e-copy' },
{ iconCss: 'e-icons e-paste' }
];
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Linear' direction='Left' target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Floating Action Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='button'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>{/* 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' },
{ iconCss: 'e-icons e-copy' },
{ iconCss: 'e-icons e-paste' }
];
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Linear' direction= 'Left' target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));In Radial mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link here.