How to Add Toolbar in Line with Tabs
IntegralUI TabStrip component has an option to add custom content that will appear on left or right side with tabs in the middle. In case of a toolbar, you can create one using buttons and set them to appear in the same line as tabs. In this article, you will learn how to create a toolbar with custom buttons, place it on right side of the tab strip in the same line as tabs.
You will find sample code that shows how to create a toolbar to appear in line with tab headers in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As example shows, there are some tabs on left side and a toolbar with buttons on the right side. Clicking on a button will display a message, stating which button is clicked.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue.
How to Add Custom Toolbar with Buttons to TabStrip
TabStrip component has two slots available for adding custom content to the tab strip (the same line where tabs appear). The names of these slots are:
- 'toolbar-left' - a space reserved for custom content that will appear on left side before tabs
- 'toolbar-right - a space reserved for custom content that will appear on right side after tabs
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Using these slots, you can place any custom HTML elements to appear in the same line as tabs. In this example, the toolbar on right side is shown.
These slots are only usable when tabs are placed on Top or Bottom side. On other sides, this mode is disabled.
How to Create a Toolbar
For a toolbar, you can use a Toolbar component, or create your own by using custom HTML elements. In this case, a combination of <div> and <span> elements are used to create buttons and a separator between them.
To create a button, you can use the element where its background attribute is set to display a custom image. Whenever the button is hovered, using CSS you can change the button background to a different color. Each button has display attribute set to 'inline-block', so that they all appear inline.
Once you have buttons set, you can add them to the block
How to Handle Tool Button Events
In current state, the toolbar is non-functional. It display buttons in the same line as tabs but without any action. You can change this by handing click event to each button. Depending on the button position within the toolbar, you can determine which button is clicked.
In this example, whenever a button is clicked a custom message will popup showing which button is clicked.
Conclusion
IntegralUI TabStrip component comes with a built-in option that allows you to add custom content to the tab strip that will appear in the same line as tabs. You can use any kind of custom HTML elements to add content to left or right side of the tab strip with tabs in the middle. In case of a toolbar, it can be a custom made with buttons and separators and they can have custom actions when clicked.
A sample code is available in JavaScript, Angular, React and Vue that shows how to create a toolbar in line with tabs. The TabStrip is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.