The React Speed Dial action items can be displayed in a circular patter like a radial menu by setting mode property. You can customize the direction, startAngle, endAngle and offset by setting radialSettings property.
You can open the action items in either clockwise or anticlockwise by setting direction property. The default value is Auto where the action items are displayed based on the position property of the Speed Dial.
{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } 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' },
{ iconCss: 'e-icons e-edit' },
{ iconCss: 'e-icons e-save' }
];
const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise' };
return (
{/* Initialize the SpeedDial component. */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} target="#targetElement"></SpeedDialComponent>
);
}
export default App;You can modify the start and end angle of action items by setting startAngle and endAngle properties. If the angle is not defined, the action items are displayed based on the position property of the Speed Dial.
{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } 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' },
{ iconCss: 'e-icons e-edit' },
{ iconCss: 'e-icons e-save' }
];
const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', startAngle: 180, endAngle: 360 };
return (
{/* Initialize the SpeedDial component. */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} position='MiddleCenter' target="#targetElement"></SpeedDialComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));You can modify the offset distance between action items and Speed Dial button using offset property.
{/* Import the Speed Dial. */}
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } 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' },
{ iconCss: 'e-icons e-edit' },
{ iconCss: 'e-icons e-save' }
];
const radialSettings: RadialSettingsModel = { offset: '80px' };
return (
{/* Initialize the SpeedDial component. */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode= 'Radial' radialSettings= {radialSettings} target="#targetElement"></SpeedDialComponent>
);
}
export default App;Below example demonstrates the radial menu settings of the Speed Dial.
{ /* 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' },
{ iconCss: 'e-icons e-edit' },
{ iconCss: 'e-icons e-save' }
];
const radialSettings = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };
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='Radial' position='MiddleRight' radialSettings={radialSettings} 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.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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, RadialSettingsModel } 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' },
{ iconCss: 'e-icons e-edit' },
{ iconCss: 'e-icons e-save' }
];
const radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };
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= 'Radial' position= 'MiddleRight' radialSettings= {radialSettings} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));