Styles in React Speed dial component
30 Jan 202316 minutes to read
This section briefs different ways to style SpeedDial component.
SpeedDial button
You can customize the icon and text of React Speed Dial button using openIconCss
, closeIconCss
and content
properties.
Icon only
You can use the openIconCss
and closeIconCss
properties to show icons in speed dial button. You can also show tooltip on hover to show additional details to end-user by setting title
attribute.
{ /* 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() {
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
{/* Initialize the SpeedDial component with only icon */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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() {
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component with only icon */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Text only
You can show only text in Speed Dial button by setting content
property without setting icon 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() {
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
{/* Initialize the SpeedDial component with only text */}
<SpeedDialComponent id='speeddial' content='Edit' target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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() {
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component with only text */}
<SpeedDialComponent id='speeddial' content='Edit' target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Icon with text
You show icon and text in SpeedDial button using openIconCss
, closeIconCss
and content
properties together.
{ /* 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() {
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
{/* Initialize the SpeedDial component with icon and text */}
<SpeedDialComponent id='speeddial' content='Edit' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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() {
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component with icon and text */}
<SpeedDialComponent id='speeddial' content='Edit' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Disabled
You can enable or disable the SpeedDial component using disabled
property.
{/* Import the Speed Dial. */}
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* To render Speed Dial.*/}
function App() {
return (
{/* Initialize the SpeedDial component in disabled state */}
<SpeedDialComponent id='speeddial' content='Edit' disabled={true} target="#targetElement"></SpeedDialComponent>
);
}
export default App;
cssClass
The React Speed Dial supports the following predefined styles that can be defined using the cssClass
property. You can customize by setting the cssClass
property with the below defined class.
cssClass | Description |
---|---|
e-primary | Used to represent a primary action. |
e-outline | Used to represent an appearance of button with outline. |
e-info | Used to represent an informative action. |
e-success | Used to represent a positive action. |
e-warning | Used to represent an action with caution. |
e-danger | Used to represent a negative action. |
{ /* 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() {
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
{/* Initialize the SpeedDial component with applied warning style */}
<SpeedDialComponent id='speeddial' content='Edit' cssClass='e-warning' target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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() {
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component with applied warning style */}
<SpeedDialComponent id='speeddial' content='Edit' cssClass='e-warning' target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Visible
You can set the Speed Dial button to visible/hidden state using visible
property.
{/* Import the Speed Dial. */}
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* To render Speed Dial.*/}
function App() {
return (
{/* Initialize the SpeedDial component in hidden state */}
<SpeedDialComponent id='speeddial' content='Edit' visible={false} target="#targetElement"></SpeedDialComponent>
);
}
export default App;
Tooltip
You can show tooltip on hover to show additional details to end-user by setting title
to Speed Dial button.
{ /* 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', title: 'Cut' },
{ iconCss: 'e-icons e-copy', title: 'Copy' },
{ iconCss: 'e-icons e-paste', title: 'Paste' }
];
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit' target='#targetElement'></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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', title:'Cut' },
{ iconCss:'e-icons e-copy', title:'Copy' },
{ iconCss:'e-icons e-paste', title:'Paste' }
];
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit' target='#targetElement'></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));
Opens on hover
You can use opensOnHover
property to open actions items on hover itself. By default action items displayed only when clicking the speed dial button.
{ /* 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>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement"></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
{/* 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>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover= {true} target="#targetElement"></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));