Overview

Smart.Tabs element represents a custom element with selectable tabs and content sections associated with them.

To initialize a Smart.Tabs, the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.tabs.js – the JS file containing the element definition

The following code adds Smart.Tabs element to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.tabs.js"></script> </head> <body> <smart-tabs> <smart-tab-item label="Tab 1" selected> // Content goes here. </smart-tab-item> <smart-tab-item label="Tab 2"> // Content goes here. </smart-tab-item> <smart-tab-item label="Tab 3"> // Content goes here. </smart-tab-item> </smart-tabs> </body> </html>

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The position of the tab strip is controlled by setting the property tabPosition. Possible values for it are:

  • top
  • bottom
  • left
  • right
  • hidden
 <smart-tabs tab-position="bottom">
    <smart-tab-item label="Tab 1" selected>
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 2">
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 3">
	// Content goes here.
    </smart-tab-item>  
 </smart-tabs>

Demo

Behavior

When the custom element is not wide enough to display all tabs, one of four behaviours occurs. These are controlled by the overflow property and are:

  • scroll – scroll buttons (instances of smart-repeat-button) allow the tabs to be scrolled through;
  • dropdown – shows a dropdown with all tabs, even those that could not be displayed. Selecting an item from the dropdown makes its corresponding tab visible and selects it;
  • wrap – all tabs are visible and are displayed on multiple lines (if necessary);
  • shrink – tabs shrink in size (if necessary) so that all of them are visible on a single line (similar to how tabs behave in browsers).
 <smart-tabs overflow="scroll">
    <smart-tab-item label="Tab 1" selected>
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 2">
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 3">
	// Content goes here.
    </smart-tab-item>   
    <smart-tab-item label="Tab 4">
	// Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 5">
	// Content goes here.
    </smart-tab-item>
 </smart-tabs>

Demo

The initially selected tab is the one which has the attribute selected. Only one tab can be selected at a given time. If selected is not applied to any tab, the first one is selected by default. Selection can be dynamically changed using the mouse, keyboard and by calling the method select.

The property selectionMode determines the way the user can switch between tabs. Possible values are:

  • click
  • dblclick
  • mouseenter
  • none – tabs can be switched only programmatically.
 <smart-tabs selection-mode="dblclick">
    <smart-tab-item label="Tab 1" selected>
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 2">
    // Content goes here.
    </smart-tab-item>
    <smart-tab-item label="Tab 3">
	// Content goes here.
    </smart-tab-item>   
 </smart-tabs>

Demo

Tabs can be reordered by dragging with the mouse if the property reorder is set to true.

Content sections can be collapsed if the property collapsible is set to true and if the corresponding tab is clicked. Clicking the tab again restores the collapsed content section.

Keyboard Support

User can navigate between the tabs via arrow keys. Arrow Up and Arrow Left decreased the number of the selection, Arrow Down and Arrow Right increase it. Home moves the selection to the first tab, End to the last.