How to customize toolbar scroll step in Angular Toolbar component
17 Jan 20236 minutes to read
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.
<div class="control-section e-tbar-section">
<div class="e-sample-resize-container">
<!-- Render the Toolbar Component -->
<ejs-toolbar id="toolbar" scrollStep="50">
<e-items>
<e-item prefixIcon='e-cut-icon tb-icons' tooltipText='Cut'></e-item>
<e-item prefixIcon='e-copy-icon tb-icons' tooltipText='Copy'></e-item>
<e-item prefixIcon='e-paste-icon tb-icons' tooltipText='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-bold-icon tb-icons' tooltipText='Bold'></e-item>
<e-item prefixIcon='e-underline-icon tb-icons' tooltipText='Underline'></e-item>
<e-item prefixIcon='e-italic-icon tb-icons' tooltipText='Italic'></e-item>
<e-item prefixIcon='e-color-icon tb-icons' tooltipText='Color-Picker'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-alignleft-icon tb-icons' tooltipText='Align-Left'></e-item>
<e-item prefixIcon='e-alignright-icon tb-icons' tooltipText='Align-Right'></e-item>
<e-item prefixIcon='e-aligncenter-icon tb-icons' tooltipText='Align-Center'></e-item>
<e-item prefixIcon='e-alignjustify-icon tb-icons' tooltipText='Align-Justify'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-bullets-icon tb-icons' tooltipText='Bullets'></e-item>
<e-item prefixIcon='e-numbering-icon tb-icons' tooltipText='Numbering'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-ascending-icon tb-icons' tooltipText='Ascending'></e-item>
<e-item prefixIcon='e-descending-icon tb-icons' tooltipText='Descending'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-upload-icon tb-icons' tooltipText='Upload'></e-item>
<e-item prefixIcon='e-download-icon tb-icons' tooltipText='Download'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-indent-icon tb-icons' tooltipText='Indent'></e-item>
<e-item prefixIcon='e-outdent-icon tb-icons' tooltipText='Outdent'></e-item>
<e-item type='Separator'></e-item>
<e-item prefixIcon='e-clear-icon tb-icons' tooltipText='Clear'></e-item>
<e-item prefixIcon='e-reload-icon tb-icons' tooltipText='Reload'></e-item>
<e-item prefixIcon='e-export-icon tb-icons' tooltipText='Export'></e-item>
</e-items>
</ejs-toolbar>
<br/>
</div>
</div>
import { Component, ViewEncapsulation, Inject } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
templateUrl: 'app/app.component.html',
encapsulation: ViewEncapsulation.None
})
export class DefaultToolbarComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { DefaultToolbarComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule
],
declarations: [DefaultToolbarComponent],
bootstrap: [DefaultToolbarComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);