Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Tabbar and go into deep dive on its functionality.

How to start with DHTMLX Tabbar

In this section you can find out how to initialize Tabbar, how to attach the necessary components to its tabs, and how to integrate a Tabbar into your applications.

Initialization

TopicDescription
Basic initializationLearn how to initialize a Tabbar (Example)
Attaching widgetsLearn how to attach a DHTMLX component to a Tabbar tab (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Tabbar with React (Demo)
Angular integrationLearn how to use DHTMLX Tabbar with Angular (Demo)
Vue integrationLearn how to use DHTMLX Tabbar with Vue.js (Demo)

How to configure Tabbar

In this section you will know how to create a Tabbar with the necessary number of tabs, how to specify the active tab, and how to define the position of the Tabbar on a page.

TopicDescription
Defining Tabbar structureLearn how to create a Tabbar of the necessary structure (Example)
Setting the active tabLearn how to specify an active tab on initialization of Tabbar
Configuring Tabbar positionLearn how to specify where the Tabbar should be displayed on the page (Example)

How to configure Tabbar tabs

In this section you can find out how to configure the size, alignment and visibility of tabs.

TopicDescription
Adding close buttons for tabsLearn how to equip tabs with close buttons (Example)
Making tabs disabledLearn how to initialize Tabbar with several disabled tabs (Example)
Configuring alignment of tabsLearn how to configure alignment of tabs in Tabbar (Example)
Rendering tabs without contentLearn how to render a tab without any content (Example)

How to customize Tabbar and tabs

In this section you can learn how to customize a Tabbar and configure the size of its tabs.

TopicDescription
Width and height of tabsLearn how to configure the width and height for tabs (Example)
Auto-width and auto-height for tabsLearn how to configure autoheight and autowidth for tabs (Example 1,Example 2)
Adding tooltips for tabsThe example shows how to add tooltips for Tabbar tabs
Styling TabbarLearn how to change the look and feel of Tabbar (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with tabs

In this section you will learn how to add or remove, enable or disable a tab, how to set and get the active tab.

TopicDescription
Adding / removing tabsLearn how add or remove tabs of Tabbar dynamically (Example)
Enabling / disabling a tabLearn how to enable or disable a tab dynamically (Example)
Is disabled tabLearn how to check whether a tab is disabled on the page (Example)
Setting the active tabLearn how to set the active tab (Example)
Getting the active tabLearn how get the currently active tab (Example)

How to work with Tabbar events

This section explains how to work with Tabbar events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Tabbar events (Example)

API reference

In this section you can find out corresponding references of Tabbar API.

TopicDescription
Tabbar methodsCheck the list of Tabbar methods
Tabbar eventsCheck the list of Tabbar events
Tabbar propertiesCheck the list of Tabbar properties

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Tabbar.

TopicDescription
Touch supportLearn how to work with touch support (Example)
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in Layout cells
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!