ToolbarModel API in React Toolbar API component

Interface for a class Toolbar

Properties

beforeCreate

EmitType<BeforeCreateArgs>

The event will be fired before the control is rendered on a page.

clicked

EmitType<ClickEventArgs>

The event will be fired on clicking the Toolbar elements.

created

EmitType<Event>

The event will be fired when the control is rendered.

destroyed

EmitType<Event>

The event will be fired when the control gets destroyed.

allowKeyboard

boolean

When this property is set to true, it allows the keyboard interaction in toolbar.

cssClass

string

Sets the CSS classes to root element of the Tab that helps to customize component styles.

enableCollision

boolean

Enable or disable the popup collision.

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

height

string | number

Specifies the height of the Toolbar in pixels/number/percentage. Number value is considered as pixels.

items

ItemModel[]

An array of items that is used to configure Toolbar commands.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

overflowMode

OverflowMode

Specifies the Toolbar display mode when Toolbar content exceeds the viewing area. The possible values for this property as follows

• Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
• Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the popup.
• MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
• Extended: Hide the overflowing toolbar items in the next row. Show the overflowing toolbar items when you click the expand icons. If the popup content overflows the height of the page, the rest of the elements will be hidden.

scrollStep

number

Specifies the scrolling distance in scroller.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';

function App = () => {
  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="defaultTab" width="600px" scrollStep={50}>
            <ItemsDirective>
              <ItemDirective prefixIcon='e-cut-icon tb-icons' tooltipText='Cut' />
              <ItemDirective prefixIcon='e-copy-icon tb-icons' tooltipText='Copy' />
              <ItemDirective prefixIcon='e-paste-icon tb-icons' tooltipText='Paste' />
            </ItemsDirective>
          </ToolbarComponent>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

width

string | number

Specifies the width of the Toolbar in pixels/numbers/percentage. Number value is considered as pixels.