Developers

Refinement Tabs

Refinement Tabs

The .inbenta-search-tabs__bar contains the list of tabs available. Users can scroll through the tabs below the class .inbenta-search-tabs__scroll. When there is not enough space to display all tabs, an arrow is displayed on both sides to scroll to the right (.inbenta-search-tabs__scroll--next) or left (.inbenta-search-tabs__scroll--previous), depending on the tab currently in focus.

There are three different tab states:

  • Normal (.inbenta-search-tabs__item): The tab is clickable.
  • Active: Adds the class .inbenta-search-tabs__item--active when a tab is clicked. This removes the last active tab class.
  • Disable: Adds the class .inbenta-search-tabs__item--disabled when there is no contents related with a tab.

Within (.inbenta-search-tabs__item__link): has three types of information:

  • .link__text : The name of the tab content.
  • .link__badge : The number of results in the tab.
  • .link__icon : An icon to represent the tab.

Component image

Tabs

HTML structure

<div class="inbenta-search-tabs">
    <div class="inbenta-search-tabs__button inbenta-search-button-icon inbenta-search-tabs__button--disabled">
        <i class="inbenta-search-tabs__scroll inbenta-search-tabs__scroll--previous inbenta-search-tabs__scroll inbenta-search-tabs__scroll--disabled inbenta-search-icon"></i>
    </div>
    <ul class="inbenta-search-tabs__bar">
        <li class="inbenta-search-tabs__item inbenta-search-tabs__item--active">
            <a class="inbenta-search-tabs__item__link" href="#">
                <span class="link__icon inbenta-search-icon"></span>
                <span class="link__text">All results</span> 
                <small class="link__badge">1749</small>
            </a>
        </li>
        <li class="inbenta-search-tabs__item inbenta-search-tabs__item">
            <a class="inbenta-search-tabs__item__link" href="#">
                <span class="link__icon inbenta-search-icon"></span>
                <span class="link__text">>Example tab</span>
                <small class="link__badge">2</small>
            </a>
        </li>
        <li class="inbenta-search-tabs__item inbenta-search-tabs__item inbenta-search-tabs__item--disabled">
            <a class="inbenta-search-tabs__item__link" href="#">
                <span class="link__icon inbenta-search-icon"></span>
                <span class="link__text"> >Example tab disabled</span>
                <small class="link__badge">0</small>
            </a>
        </li>
    </ul>
    <div class="inbenta-search-tabs__button inbenta-search-button-icon"><i class="inbenta-search-tabs__scroll inbenta-search-tabs__scroll--next inbenta-search-tabs__scroll inbenta-search-icon"></i></div>
</div>

CSS editable properties

Class Css
.inbenta-search-tabs structural, position, height
.inbenta-search-tabs__button .inbenta-search-button-icon structural, position, padding, background, border
.inbenta-search-tabs__scroll--next:before, .inbenta-search-tabs__scroll--previous:before font, content, color
.inbenta-search-tabs__bar position, structural, padding,background, border, transition
.inbenta-search-tabs__item structural, list-style, pseudo-class(hover)
.inbenta-search-tabs__item--active inbenta-search-tabs__item__link background, color, box-shadow
.inbenta-search-tabs__item--disabled inbenta-search-tabs__item__link cursor, background, color, box-shadow, border
.inbenta-search-tabs__item__link structural, position, height, padding, background, border, box-shadow, color, text-decoration, font
.inbenta-search-tabs__item__link .link__text font, color
.inbenta-search-tabs__item__link .link__badge margin, padding, background, border, font, color
.inbenta-search-tabs__item__link .link__icon generic, margin, color