Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Haltura

Create libraries without coding.

Spartiapp

Create beautiful websites.
Log In
Alpha
Docs Creations Contact

Introduction

IntroductionInstallationBreakpoints

Components

AccordionAlertAutocompleteAvatarBadgeButtonCardCheckboxDividerDropdownFieldLayoutModalNavigationRadioSheetSkeletonSliderSnackbarSpinnerTableTabTooltipTypography

Utilities

ColorDisplayFlexboxOpacityPositionRadiusSizingSpacingTextVertical align

APIs

HalturaCookiesFrontierTour
Docs / web / tab

Tab

Structure your information by categorizing it with tabs.

Initializing the component.

The h_tab class creates the base of the tabs. It will nest 2 subparts : h_tab_header and h_tab_body.

tab
<div class="h_tab_header"></div>
<div class="h_tab_body"></div>

Associate an id to a data-tab as in the example below.

tab
<div class="h_tab_header" id="my_tab"></div>
<div class="h_tab_body" data-tab="my_tab"></div>

h_tab_header will nest all h_tab_title tabs. Then h_tab_body will nest h_tab_content.
And that is it, your Haltura Tab component is ready!

Content 1
Content 2
Content 3
tab
<div class="h_tab_header" id="my_tab">
   <button type="button" class="h_tab_title">Tab 1</button>
   <button type="button" class="h_tab_title">Tab 2</button>
   <button type="button" class="h_tab_title">Tab 3</button>
</div>
<div class="h_tab_body" data-tab="my_tab">
   <div class="h_tab_content">Content 1</div>
   <div class="h_tab_content">Content 2</div>
   <div class="h_tab_content">Content 3</div>
</div>

Disabled tabs.

It is possible to disable tabs via the disabled attribute.

Content 1
Content 2
Content 3
tab
<div class="h_tab_header" id="my_tab_disabled">
    <button type="button" class="h_tab_title">Tab 1</button>
    <button type="button" class="h_tab_title" disabled>Tab 2</button>
    <button type="button" class="h_tab_title">Tab 3</button>
</div>
<div class="h_tab_body" data-tab="my_tab_disabled">
    <div class="h_tab_content">Content 1</div>
    <div class="h_tab_content">Content 2</div>
    <div class="h_tab_content">Content 3</div>
</div>

Manage the direction of tabs.

In some cases, you need to have vertical tabs.
Use vertical--[B] to trigger its behavior depending on the breakpoint (e.g. vertical--m, vertical--t).

tab
<div class="h_tab_header vertical" id="my_tab_vertical">
    <button type="button" class="h_tab_title">Tab 1</button>
    <button type="button" class="h_tab_title">Tab 2</button>
    <button type="button" class="h_tab_title">Tab 3</button>
</div> 
<div class="h_tab_body" data-tab="my_tab_vertical">
    <div class="h_tab_content">Content 1</div>
    <div class="h_tab_content">Content 2</div>
    <div class="h_tab_content">Content 3</div>
</div>

You can manage the orientation with bottom, left and right.
By default, the Tab component is considered to be in top.
Use left--[B], right--[B] and bottom--[B] (for example, let--m, right--t, bottom--d).

Content 1
Content 2
Content 3
tabflexbox
<div class="d_flex">
   <div class="h_tab_header vertical left" id="my_tab_vertical">
        <button type="button" class="h_tab_title">Tab 1</button>
        <button type="button" class="h_tab_title">Tab 2</button>
        <button type="button" class="h_tab_title">Tab 3</button>
    </div> 
    <div class="h_tab_body" data-tab="my_tab_vertical">
        <div class="h_tab_content">Content 1</div>
        <div class="h_tab_content">Content 2</div>
        <div class="h_tab_content">Content 3</div>
    </div>
</div>

Methods for more potential.

You can manipulate the Tab component via different methods.

Content 1
Content 2
Content 3
Content 4
Content 5
tab
<button type="button" onclick="tab.previous('my_tab_2')">Previous</button>
<button type="button" onclick="tab.next('my_tab_2')">Next</button>
<button type="button" onclick="tab.select('my_tab_2', 3)">Go to 4)</button>
<button type="button" onclick="tab.reset('my_tab_2')">Reset</button>
<div class="h_tab_header" id="my_tab_2">
    <button type="button" class="h_tab_title">Tab 1</button>
    <button type="button" class="h_tab_title">Tab 2</button>
    <button type="button" class="h_tab_title" disabled>Tab 3</button>
    <button type="button" class="h_tab_title">Tab 4</button>
    <button type="button" class="h_tab_title">Tab 5</button>
</div>
<div class="h_tab_body" data-tab="my_tab_2">
    <div class="h_tab_content">Content 1</div>
    <div class="h_tab_content">Content 2</div>
    <div class="h_tab_content">Content 3</div>
    <div class="h_tab_content">Content 4</div>
    <div class="h_tab_content">Content 5</div>
</div>
Content 1
Content 2
Content 3
tab
<div class="h_tab_header" id="my_tab_disabled">
    <button type="button" class="h_tab_title">Tab 1</button>
    <button type="button" class="h_tab_title" disabled>Tab 2</button>
    <button type="button" class="h_tab_title">Tab 3</button>
</div> 
<div class="h_tab_body" data-tab="my_tab_disabled">
    <div class="h_tab_content">Content 1</div>
    <div class="h_tab_content">Content 2</div>
    <div class="h_tab_content">Content 3</div>
</div>
Class Definition
h_tab_header Tabs container.
h_tab_title Tab.
h_tab_body Content container.
h_tab_content Content.
vertical Vertical orientation.
vertical--[B] Vertical orientation at breakpoint [B].
left Change the tab style so that h_tab_header can be positioned on the left.
left--[B] Change the tab style at breakpoint [B].
right Change the tab style so that h_tab_header can be positioned on the right.
right--[B] Change the tab style at breakpoint [B].
bottom Change the tab style so that h_tab_header can be positioned on the bottom.
bottom--[B] Change the tab style at breakpoint [B].
Methods Definition
tab.select(idName, index) Displays the content at the chosen index, of the Tab targeted by its id.
The first tab starts at index 0
If index is "last", then index will match the last content.
tab.reset(idName) Resets the Tab component targeted by its id.
tab.previous(idName) Go to the previous tab.
tab.next(idName) Go to the next tab.
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)