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
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Tabbar (Example) |
| Attaching widgets | Learn how to attach a DHTMLX component to a Tabbar tab (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Tabbar with React (Demo) |
| Angular integration | Learn how to use DHTMLX Tabbar with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Defining Tabbar structure | Learn how to create a Tabbar of the necessary structure (Example) |
| Setting the active tab | Learn how to specify an active tab on initialization of Tabbar |
| Configuring Tabbar position | Learn 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.
| Topic | Description |
|---|---|
| Adding close buttons for tabs | Learn how to equip tabs with close buttons (Example) |
| Making tabs disabled | Learn how to initialize Tabbar with several disabled tabs (Example) |
| Configuring alignment of tabs | Learn how to configure alignment of tabs in Tabbar (Example) |
| Rendering tabs without content | Learn 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.
| Topic | Description |
|---|---|
| Width and height of tabs | Learn how to configure the width and height for tabs (Example) |
| Auto-width and auto-height for tabs | Learn how to configure autoheight and autowidth for tabs (Example 1,Example 2) |
| Adding tooltips for tabs | The example shows how to add tooltips for Tabbar tabs |
| Styling Tabbar | Learn how to change the look and feel of Tabbar (Example) |
| List of CSS classes | A 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.
| Topic | Description |
|---|---|
| Adding / removing tabs | Learn how add or remove tabs of Tabbar dynamically (Example) |
| Enabling / disabling a tab | Learn how to enable or disable a tab dynamically (Example) |
| Is disabled tab | Learn how to check whether a tab is disabled on the page (Example) |
| Setting the active tab | Learn how to set the active tab (Example) |
| Getting the active tab | Learn how get the currently active tab (Example) |
How to work with Tabbar events
This section explains how to work with Tabbar events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Tabbar events (Example) |
API reference
In this section you can find out corresponding references of Tabbar API.
| Topic | Description |
|---|---|
| Tabbar methods | Check the list of Tabbar methods |
| Tabbar events | Check the list of Tabbar events |
| Tabbar properties | Check 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.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support (Example) |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in Layout cells |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!