Interface for a class SpeedDial
EmitType<SpeedDialBeforeOpenCloseEventArgs>
Event callback that is raised before the speed dial popup is closed.
EmitType<SpeedDialItemEventArgs>
Event callback that is raised before rendering the speed dial item.
EmitType<SpeedDialBeforeOpenCloseEventArgs>
Event callback that is raised before the speed dial popup is opened.
EmitType<SpeedDialItemEventArgs>
Event callback that is raised when a speed dial action item is clicked.
EmitType<Event>
Event callback that is raised after rendering the speed dial.
EmitType<SpeedDialOpenCloseEventArgs>
Event callback that is raised when the SpeedDial popup is closed.
EmitType<SpeedDialOpenCloseEventArgs>
Event callback that is raised when the SpeedDial popup is opened.
SpeedDialAnimationSettingsModel
Provides options to customize the animation applied while opening and closing the popup of speed dial
{/* 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>
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-menu' items={items} animation={animation} ></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
string
Defines one or more CSS classes to include an icon or image to denote the speed dial is opened and displaying menu items.
string
Defines the content for the button of SpeedDial.
string
Defines one or more CSS classes to customize the appearance of SpeedDial.
string
| LinearDirection
Defines the speed dial item display direction when mode is linear . The possible values are
boolean
Defines whether to enable or disable the SpeedDial.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
string
| IconPosition
Defines the position of icon in the button of speed dial. The possible values are:
boolean
Specifies whether the SpeedDial acts as the primary.
string
| function
| JSX.Element
Defines the template content for the speed dial item.
{/* 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', text: 'Cut' },
{ iconCss: 'e-icons e-copy', text: 'Copy' },
{ iconCss: 'e-icons e-paste', text: 'Paste' }
];
function itemTemplate(props: any): JSX.Element {
let classname: string = "icon " + props.properties.iconCss;
return (
<div className="itemlist">
<span className={classname}></span>
<span className="text">{props.properties.text}</span>
</div>);
}
return (
<div>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-menu' items={items} itemTemplate={itemTemplate} ></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Defines the list of SpeedDial items.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
boolean
Defines whether the speed dial popup can be displayed as modal or modal less. When enabled, the Speed dial creates an overlay that disables interaction with other elements other than speed dial items. If user clicks anywhere other than speed dial items then popup will get closed.
string
| SpeedDialMode
Defines the display mode of speed dial action items. The possible values are:
{/* 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' }
];
return (
<div>
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-menu' items={items} mode='Radial'></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
string
Defines one or more CSS classes to include an icon or image for the button of SpeedDial when it’s closed.
boolean
Defines whether to open the popup when the button of SpeedDial is hovered. By default, SpeedDial opens popup on click action.
string
| function
| JSX.Element
Defines a template content for popup of SpeedDial.
string
| FabPosition
Defines the position of the button of Speed Dial relative to target. Defines the position of the FAB relative to target. The possible values are:
Provides the options to customize the speed dial action buttons when mode of speed dial is radial
{/* 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' }
];
const radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 190, endAngle: 260 };
return (
<div>
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-menu' items={items} mode='Radial' radialSettings={radialSettings}></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
string
| HTMLElement
Defines the selector that points to the element in which the button of SpeedDial will be positioned. By default button is positioned based on viewport of browser. The target element must have relative position, else Button will get positioned based on the closest element which has relative position.
boolean
Defines whether the SpeedDial is visible or hidden.