Tabs - Documentation | www.HtmlElements.com

Overview

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

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.tabs.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.tabs.js - the JS file containing the definition for the element.

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #tabs is a smart-tabs tag.

    import {smartTabs} from "../../source/modules/smart.tabs.js";
    
    Smart('#tabs', class {
    get properties() {
    	return {
    		tabPosition: 'bottom'
    	}
    }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    
    }
    
    Using the Smart function is optional. You can use const tabs = document.querySelector("#tabs"); and set the properties like that:
    const tabs = document.querySelector("#tabs");
    
    tabs.tabPosition = 'bottom';
    

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #tabs is a DIV tag.

    import {smartTabs} from "../../source/modules/smart.tabs.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    const tabs = new smartTabs('#tabs', {
       	tabPosition: 'bottom'
    });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
     <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>

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

    Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const tabs = document.createElement('smart-tabs');

Append it to the DOM:
document.body.appendChild(tabs);

Remove it from the DOM:
tabs.parentNode.removeChild(tabs);

Set a property:
tabs.propertyName = propertyValue;

Get a property value:
const propertyValue = tabs.propertyName;

Invoke a method:
tabs.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

tabs.addEventListener(eventName, eventHandler);

Remove Event Listener:
tabs.removeEventListener(eventName, eventHandler, true);

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.