The React Speed Dial action items can be added by using items
property.
Fields | Type | Description |
---|---|---|
text |
string |
Defines the text content of SpeedDialItem. |
iconCss |
string |
Defines one or more CSS classes to include an icon or image in Speed Dial item. |
disabled |
boolean |
Defines whether to enable or disable the SpeedDialItem. |
id |
string |
Defines a unique value for the SpeedDialItem which can be used to identify the item in event args. |
title |
string |
Defines the title of SpeedDialItem to display tooltip. |
You can customize the icon and text of Speed Dial action items using iconCss
and text
properties.
You can show icon only in Speed Dial items by setting iconCss
property. You can show tooltip on hover to show additional details to end-user by setting title
property.
{ /* 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} 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 } 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} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
You can show only text in Speed Dial items by setting text
property.
{ /* 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 = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
<SpeedDialComponent id='speeddial' content='Edit' items={items} 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 } 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[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
<SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
You can show icon along with text in Speed Dial items by setting iconCss
and text
properties.
{ /* 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 = [
{ text: 'Cut', iconCss: 'e-icons e-cut' },
{ text: 'Copy', iconCss: 'e-icons e-copy' },
{ text: 'Paste', 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' content='Edit' items={items} 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 } 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[] = [
{ text: 'Cut', iconCss: 'e-icons e-cut' },
{ text: 'Copy', iconCss: 'e-icons e-copy' },
{ text: 'Paste', 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' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
You can disable Speed Dial items by setting disabled
property as true
.
{ /* 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 = [
{ text: 'Cut', disabled: true },
{ text: 'Copy' },
{ text: 'Paste' }
];
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
<SpeedDialComponent id='speeddial' content='Edit' items={items} 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 } 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[] = [
{ text: 'Cut', disabled: true },
{ text: 'Copy' },
{ text: 'Paste' }
];
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
<SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
The Speed Dial items can be animated during the opening and closing of the popup action items. You can customize the animation’s effect
, delay
, and duration
by setting animation
property. By default, Speed Dial animates with a fade
effect and supports all speeddialanimation
effects.
Below example demonstrates the Speed Dial items with applied Zoom effect.
{ /* 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 = [
{ text: 'Cut', iconCss: 'e-icons e-cut' },
{ text: 'Copy', iconCss: 'e-icons e-copy' },
{ text: 'Paste', iconCss: 'e-icons e-paste' }
];
const animation = { effect: 'Zoom' };
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' content='Edit' items={items} animation={animation} 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, SpeedDialAnimationSettingsModel } 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[] = [
{ text: 'Cut', iconCss: 'e-icons e-cut' },
{ text: 'Copy', iconCss: 'e-icons e-copy' },
{ text: 'Paste', iconCss: 'e-icons e-paste' }
];
const animation: SpeedDialAnimationSettingsModel =
{ effect: 'Zoom' };
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' content='Edit' items={items} animation={animation} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
The Speed Dial supports to customize the action items and entire pop-up container by setting itemTemplate
and popupTemplate
properties. For more details about templates, check out the link here.