Tabs CSS Styling

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

Required files

Smart.Tabs requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.tabs.js — this file defines the main functionality of the Smart.Tabs custom element.
  • smart.button.js — this file contains the smart-repeat-button custom element. The scroll buttons of Smart.Tabs are instances of smart-repeat-button.

Smart.Tabs also requires the following style sheets in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To initialize (instantiate) a Smart.Tabs custom element, insert the following tag in an HTML page:

<smart-tabs>
    <smart-tab-item title="TAB 1">Content 1</smart-tab-item>
    <smart-tab-item title="TAB 2" selected>Content 2</smart-tab-item>
    <smart-tab-item title="TAB 3">Content 3</smart-tab-item>
    <smart-tab-item title="TAB 4">Content 4</smart-tab-item>
</smart-tabs>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-tabs position="left" selection-mode="mouseenter">
    <smart-tab-item title="TAB 1">Content 1</smart-tab-item>
    <smart-tab-item title="TAB 2" selected>Content 2</smart-tab-item>
    <smart-tab-item title="TAB 3">Content 3</smart-tab-item>
    <smart-tab-item title="TAB 4">Content 4</smart-tab-item>
</smart-tabs>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-tabs');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let position = customElement.position;

Here is an example showing how to set a property dynamically:

customElement.position = 'bottom';

Calling methods

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-tabs');

Methods are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.select(3);

Animations

By default the animation for Smart.Tabs is disabled. It can be enabled by adding the CSS class called “animation” to the element, like so:

<smart-tabs class="animation">
    <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
    <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
    <smart-tab-item label="TAB 3">Content 3</smart-tab-item>
    <smart-tab-item label="TAB 4">Content 4</smart-tab-item>
</smart-tabs>

A “ripple” effect when selecting tabs can also be enabled by adding the class “ripple” (it works only when “animation” is present, too):

<smart-tabs class="animation ripple">
    <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
    <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
    <smart-tab-item label="TAB 3">Content 3</smart-tab-item>
    <smart-tab-item label="TAB 4">Content 4</smart-tab-item>
</smart-tabs>

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.Tabs:

  • smart-tabs – applied to the whole Tabs element. Can be used for setting width, height and border-, color- and font-related CSS properties.
    • .smart-tabs-header-section – applied to the Tabs header section, which includes the scroll buttons, tab strip, dropdown button and resize token.
    • .smart-tabs-scroll-button – applied to the Tabs scroll buttons. These are shown only when the property tabOverflow is ‘scroll’ and there is not enough space to show all tab labels. See also section “CSS variables”.
    • .smart-tab-strip – applied to the tab strip, which contains all tab and group labels.
      • .smart-tab-label-container – applied to tab labels.
      • .smart-tab-selected – applied to the labels of selected tabs.
      • .smart-tab-hovered – applied to hovered tab labels.
      • .smart-add-new-tab – applied to the “Add new” tab (+) label.
      • .smart-tab-close-button – applied to tab close buttons.
      • .smart-tab-close-button-hovered – applied to hovered tab close buttons.
      • .smart-tab-group-container – applied to tab group labels;
      • .smart-tab-group-selected – applied to the labels of groups which contain selected tabs.
      • .smart-tab-group-drop-down – applied to the dropdown which is shown when a group label is clicked.
    • .smart-tabs-drop-down-button – applied to the dropdown button. It is shown only when the property tabOverflow is ‘dropdown’ and there is not enough space to show all tab labels. See also section “CSS variables”.
    • .smart-tabs-drop-down-button-drop-down – applied to the dropdown which is shown when the dropdown button is clicked.
    • .smart-tabs-resize-token – applied to the element which is shown to indicate resize operation.
    • .smart-tabs-content-section – applied to the Tabs content section.
    • smart-tab-item – applied to tab items, which represent the content of each tab.
    • smart-tab-items-group – applied to tab item groups, which are containers of grouped tab items.

CSS variables

Smart.Tabs uses the following CSS variables:

  • –smart-tabs-header-button-size — used to set the size of the scroll buttons and dropdown button of Smart.Tabs (their width when position is ‘top’ or ‘bottom’ and their height when position is ‘left’ or ‘right’). Default value is 20px.
  • –smart-tabs-animation-duration — used to set the animation duration of Smart.Tabs. Default value is 0.5s. Has to be set in seconds (s).