React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ToolbarComponent

Represents the React Toolbar Component.

<ToolbarComponent></ToolbarComponent

Properties

allowKeyboard

boolean

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

Defaults to true

cssClass

string

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

Defaults to ”

enableCollision

boolean

Enable or disable the popup collision.

Defaults to true

enableHtmlSanitizer

boolean

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

Defaults to true

enablePersistence

boolean

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

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height

string | number

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

Defaults to ‘auto’

items

ItemModel[]

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

Defaults to []

locale

string

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

Defaults to ”

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.

Defaults to ‘Scrollable’

scrollStep

number

Specifies the scrolling distance in scroller. 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.
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 />);

Defaults to null

width

string | number

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

Defaults to ‘auto’

Methods

addItems

Adds new items to the Toolbar that accepts an array as Toolbar items.

Parameter Type Description
items ItemModel[] DOM element or an array of items to be added to the Toolbar.
index (optional) number Number value that determines where the command is to be added. By default, index is 0.

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

disable

Specifies the value to disable/enable the Toolbar component. When set to true, the component will be disabled.

Parameter Type Description
value boolean Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).

Returns void

enableItems

Enables or disables the specified Toolbar item.

Parameter Type Description
items number | HTMLElement | NodeList DOM element or an array of items to be enabled or disabled.
isEnable (optional) boolean Boolean value that determines whether the command should be enabled or disabled.
By default, isEnable is set to true.

Returns void

hideItem

Shows or hides the Toolbar item that is in the specified index.

Parameter Type Description
index number | HTMLElement | Element Index value of target item or DOM element of items to be hidden or shown.
value (optional) boolean Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.

Returns void

refreshOverflow

Refresh the whole Toolbar component without re-rendering.

  • It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.
  • It will refresh the Toolbar component after loading items dynamically.

Returns void

removeItems

Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.

Parameter Type Description
args number | HTMLElement | NodeList | Element | HTMLElement[]
Index or DOM element or an Array of item which is to be removed from the Toolbar.

Returns void

Events

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.

Previous
Next