Tab Container

Step by Step

 

1. In the Layout Canvas, click on the “+” button, search for the Tab Container in the Components list and insert it on the Canvas.

 

 

Customizing the Component:

 

1. To configure it, click a twice on the component, here you can customize the Tab Container:

 

• Layout:

 

  ◦ Layout Style: choose if you want your tabs in Buttons or Timeline format

 

Buttons (round Corners)

 

 

 

Timeline

 

 

• Tabs Container Width:

   ◦ Fluid: the Tab Container will inherit the width of the page

   ◦ Boxed width: the Tab Container has a default width, smaller than the page

 

• Active Item:

   ◦ First item to open: choose the tab that will be highlighted first. The number equals to the respective tab's position in the Tab container

   ◦ Color: change the color if you want to highlight the active item.

 

• • Text:

   ◦ Title: title that can be above the tabs. It’s optional.

   ◦ Text color: the color for the title and text of the tabs

 

     **Note: all the color settings are optional, since you can go with the default options.

 

2. For the option Buttons as Layout Style (round corners), you need to configure:

 

• Round corners tabs settings

 

• Background:

   ◦ Tab background: the default color of the tab.

   ◦ Tab Hover background: the color when the cursor is positioned on the tab

   ◦ Tab active background: the color when a tab is selected

 

• Box shadow:

   1 Select “on” in the options of Box shadow if you want shadows on any of the 3 stages (normal, hover, active). This setting is optional.

 

   2. After this, select a color and a shadow style

 

• Border:

   ◦ Border radius: select a size option for the Border radius

   ◦ Border configuration: you can change the option of border width and border color for normal, hover, and active tabs.

 

 

3. If you choose Timeline as Layout Style, you can configure the slider's settings:

 

• Desktop and Mobile

   ◦ Slides to show: choose how many tabs will be shown.

   ◦ Initial slide: choose a slide to initiate the row

   ◦ Navigation style: select if want to navigate between the slides with arrow icons on the sides or just by clicking on the tabs.

 

 

 

4. Click on "Apply" to save your changes.