React
Demos
Support
Forum
Download
Search results

How to customize toolbar scrollStep in React Toolbar component

Toolbar supports to customize the scrolling distance when you click the left and right side navigation icons. we can customize ScrollStep property for scrolling distance. Refer to the following code example.

By using Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.

Source
Preview
index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
export class ReactApp extends React.Component {
    render() {
        const divMargin = { margin: '25px 0' };
        return (<div className='control-pane'>
        <div className='control-section tbar-control-section'>
          <div className='control toolbar-sample tbar-sample' style={divMargin}>
            <ToolbarComponent id="ej2Toolbar" width="600px" scrollStep="50">
              <ItemsDirective>
                <ItemDirective prefixIcon='e-cut-icon' tooltipText='Cut'/>
                <ItemDirective prefixIcon='e-copy-icon' tooltipText='Copy'/>
                <ItemDirective prefixIcon='e-paste-icon' tooltipText='Paste'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-bold-icon' tooltipText='Bold'/>
                <ItemDirective prefixIcon='e-underline-icon' tooltipText='Underline'/>
                <ItemDirective prefixIcon='e-italic-icon' tooltipText='Italic'/>
                <ItemDirective prefixIcon='e-color-icon' tooltipText='Color-Picker'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-alignleft-icon' tooltipText='Align_Left'/>
                <ItemDirective prefixIcon='e-alignright-icon' tooltipText='Align_Right'/>
                <ItemDirective prefixIcon='e-aligncenter-icon' tooltipText='Align_Center'/>
                <ItemDirective prefixIcon='e-alignjustify-icon' tooltipText='Align_Justify'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-bullets-icon' tooltipText='Bullets'/>
                <ItemDirective prefixIcon='e-numbering-icon' tooltipText='Numbering'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-bullets-icon' tooltipText='Bullets'/>
                <ItemDirective prefixIcon='e-numbering-icon' tooltipText='Numbering'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-ascending-icon' tooltipText='Sort A - Z'/>
                <ItemDirective prefixIcon='e-descending-icon' tooltipText='Sort Z - A'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-indent-icon' tooltipText='Text Indent'/>
                <ItemDirective prefixIcon='e-outdent-icon' tooltipText='Text Outdent'/>
                <ItemDirective type='Separator'/>
                <ItemDirective prefixIcon='e-clear-icon' tooltipText='Clear'/>
                <ItemDirective prefixIcon='e-reload-icon' tooltipText='Reload'/>
                <ItemDirective prefixIcon='e-export-icon' tooltipText='Export'/>
              </ItemsDirective>
            </ToolbarComponent>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById('toolbar'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';

export class ReactApp extends React.Component<{}, {}> {

  render () {
    const divMargin = { margin: '25px 0' };

    return (
      <div className='control-pane'>
        <div className='control-section tbar-control-section'>
          <div className='control toolbar-sample tbar-sample' style={divMargin}>
            <ToolbarComponent id="ej2Toolbar" width="600px" scrollStep="50">
              <ItemsDirective>
                <ItemDirective prefixIcon = 'e-cut-icon'  tooltipText = 'Cut'/>
                <ItemDirective prefixIcon = 'e-copy-icon'  tooltipText = 'Copy'/>
                <ItemDirective prefixIcon = 'e-paste-icon'  tooltipText = 'Paste'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bold-icon'  tooltipText = 'Bold'/>
                <ItemDirective prefixIcon = 'e-underline-icon'  tooltipText = 'Underline'/>
                <ItemDirective prefixIcon = 'e-italic-icon'  tooltipText = 'Italic'/>
                <ItemDirective prefixIcon = 'e-color-icon'  tooltipText = 'Color-Picker'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-alignleft-icon'  tooltipText = 'Align_Left'/>
                <ItemDirective prefixIcon = 'e-alignright-icon'  tooltipText = 'Align_Right'/>
                <ItemDirective prefixIcon = 'e-aligncenter-icon'  tooltipText = 'Align_Center'/>
                <ItemDirective prefixIcon = 'e-alignjustify-icon'  tooltipText = 'Align_Justify'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bullets-icon'  tooltipText = 'Bullets'/>
                <ItemDirective prefixIcon = 'e-numbering-icon'  tooltipText = 'Numbering'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bullets-icon'  tooltipText = 'Bullets'/>
                <ItemDirective prefixIcon = 'e-numbering-icon'  tooltipText = 'Numbering'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-ascending-icon'  tooltipText = 'Sort A - Z'/>
                <ItemDirective prefixIcon = 'e-descending-icon'  tooltipText = 'Sort Z - A'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-indent-icon'  tooltipText = 'Text Indent'/>
                <ItemDirective prefixIcon = 'e-outdent-icon'  tooltipText = 'Text Outdent'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-clear-icon'  tooltipText = 'Clear'/>
                <ItemDirective prefixIcon = 'e-reload-icon'  tooltipText = 'Reload'/>
                <ItemDirective prefixIcon = 'e-export-icon'  tooltipText = 'Export'/>
              </ItemsDirective>
            </ToolbarComponent>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById('toolbar'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</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/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            visibility: hidden;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }
    </style>
</head>

<body>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
    <br/>
</body>

</html>
Previous
Next