Smart Tab

Where to find?

Smart Tab element available from Quix 1.7 and onward. Make sure your Quix version is 1.7+ to use this awesome element.

• Go to a Quix page.
• Click on Add Element

• Find the Smart Tab on the element list and click over it. You can use the Search box at the right-top to find it quickly.

Configuration

GENERAL

• Add New : This button allows you adding new tabs.
• Layout : Lets you define that the tab is gonna be Vertical or Horizontal.
• Alignment : Define the tab placement. By default its left.
• Icon Placement : Define the icon placement. By default its left as well.

Clicking on a tab item, you can find 4 additional settings to configure.

• Title : Title of the tab.
• Sub Title : Put the tab’s subtitle.
• Trigger id : Put the section/ column/ row/ element id which you want to show inside the tab just by triggering this switch.
• Select Media : You can select either icon or image for each tab item. It appears above the tab item.

STYLES

• Title Font : Select the font family and its variants for the title.
• Color : Choose the title text color.
• Subtitle Font : Select the font family and its variants for the subtitle.
• Color : Choose the subtitle text color.
• Subtitle Margin : Define margin space between title and subtitle.
• Icon Size : Choose the icon size.
• Margin : Define margin space between icon and title.
• Background Color : Choose the hover background color for the navigation.
• Title Color : Choose the hover title color.
• Subtitle Color : Choose the hover subtitle color.
• Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its hover.
• Background Color : Select active nav background color.
• Title Color : Select the active title color.
• Subtitle Color : Select the active title color.
• Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its active state.
• Background : Choose a background color for the tab body.
• Box Shadow : Apply a box shadow on tab body.
• Margin : Define margin space on tab body.
• Padding : Define padding space on tab body.

ANIMATION

• Animation Type (Entrance Animation - Parent): Choose an entrance animation style from the drop-down for tab navigation.
• Animation Type (Hover Animation - Parent): Choose a hover animation for tab navigation.
• Content Animation (Tab Content Animation): Pick an animation style for the tab contents.

ADVANCED

• Label : Put the tab name as per your preference.
• Id : Autogenerated smart tab’s id. It can be changed according to your need.
• Class : You can put additional class to add extra CSS properties, if needed.

How To’s

Load any ELEMENT inside Smart Tab

• Add Smart Tab element from the list of Quix elements.
• Add your preferred number of tab, suing ADD NEW button at top-left of its configuration modal.
• Configure its variants according to your preference and save it using the green Save button at left-bottom.

• Now, add the elements that you want to show inside the smart tab.

Even, you can edit the column grid style to represent it differently. For better understanding, watch the video below.

Find other Quix How To Tutorials here.

• Click on the Settings icon of the element to show inside smart tab.

• Under ADVANCED tab, copy the element id from the id field.

• Now, click on Smart Tab’s Settings icon.

• Click over the tab item to set it as trigger.

• Paste the copied element id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Similarly, copy the other element’s id and paste on the Smart Tab item’s trigger fields.

Front-end appearance:

Load a SECTION inside Smart Tab

You can effortlessly show a whole section inside this extensible Smart Tab. It's absolutely hassle-free and almost similar like showing an element inside it. The only thing you have to do is to copy the section id and paste on the Trigger id field of a Smart Tab navigation.

• Click on Section Settings icon.

• Copy the section id from section’s Advanced tab.

• Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Load a ROW inside Smart Tab

• Click on Row Settings icon.

• Copy the row id from section’s Advanced tab.

• Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Load a COLUMN inside Smart Tab

• Click on Column Settings icon.

• Copy the column id from column’s Advanced tab.

• Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Smart Tab Live Demo

Find Smart Tab Live Demo here.