How to build the tabs in UI Builder

The tabs is a common UI element, it allows the user to switch content on the page.
This recipe describes how to implement it in UI Builder:

Structure

Let’s start building tabs by creating a component structure on the User Interface tab.
The general structure of the component is shown below. Each ID must be given a meaningful and unique name.
As a result, we will get a scheme like this (note : in the screenshot, the styles described below have already been applied):

For tabs container, all tab elements and all content elements , we will use the Block component.

Screenshot 2021-08-23 at 13.44.23

Use the Text component for all tab title.

Screenshot 2021-08-23 at 13.44.29

Use any component that suits you to fill the content blocks. Here we use the Paragraph component.

Screenshot 2021-08-23 at 13.44.36

After adding content to our Block, let’s reset the styles using special button:

Screenshot 2021-08-23 at 13.44.52

Also, when adding elements, be sure to specify its class.

Screenshot 2021-08-23 at 14.00.21

Styles

To create styles, switch to the Theme tab. Inside the page, select the Editor and Extensions tabs.
Create an Extension. We recommend you name the extension according to the component name for convenience.
The following code is written using CSS LESS.

.container {
  align-items: center;
  margin: 0 10px;
}

.tab {
  position: relative;
  cursor: pointer;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0%;
    transition: width .2s ease-in-out;
    background: transparent;
  }
  &.current {
    &::after {
      width: 100%;
      background: black;
    }
    & .tab__title {
      color: black;
    }
  }
  &__title {
    padding: 10px;
    color: grey;
    transition: color .2s ease-in-out;
  }
}

.content {
  margin: 0 10px;
}

Logic

At first, we need to set a flag with the name of the tab, which should be open when the user opens the page.
Click on Page, then on the puzzle icon.

Screenshot 2021-08-23 at 14.35.31

Find On Page Enter logic block and click on +.

We set property currentTab in Page Data with value - the name of your tab, it can be anything you like.

Then we create logic to set property currentTab by clicking on the tab element.
To do this, click on the tab element, then on the puzzle icon.
Find On Click logic block and click on +.

Then add the Class List Logic:

We create list of classes in dependence of the name of current tab.

Repeat these steps for all tabs, names of tabs must be different:




Next, we describe the logic for change the appearance of the content in dependence of currentTab value.
To do this, click on the tab content element, then on the puzzle icon.
Find Visibility Logic block and click on +.

Note: all the content elements option Display must be unchecked.

Done! Now you know how to quickly and easily create the tabs for your application using Backendless UI Builder.

Demo

Thank for the information. And what about loading data from backend for each tab? To avoid client memory consumption, in my use case I need to load data when enter tab and disposing it when leaving.

Hello @Junior_Vidotti,

I can advise you to create some variable (e.g. dataVariable) and add the On Click Events with the necessary logic to the each tab block.
Every time you’ll click on tab (block), you can check what block is it (e.g. by its id), and what data should be loaded to the dataVariable for that tab.
Clicking on the other tab changes the currentTab variable and you can set dataVariable=null before loading data using another tab.

Regards,
Olha

Apologies for me being clueless, but where can I find the tabs component or do I need to create it? It’s not clear.

Hi Elad,

Please make sure to read this recipe from the very beginning. It describes how to create tabs.

Regards,
Mark

@mark-piller , @Hanna_Syniavska

How could I add CSS so that the tab__title has the same style on hover as when it has tab current class?