Tabs

Metro 4 has at its disposal classes and a plugin for creating an tabbed interface.

Horizontal

To create horizontal tabs add class tabs to list and attribute data-role="tabs". To set tabs on bottom add class bottom.

Default tabs is collapsed.

To expand add one of media point to attribute data-expand="true" or data-expand-point="fs|sm|md|lg|xl|xxl".


                    <ul data-role="tabs" data-expand="true">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>

You can create tabs with bottom orientation. To crete it add attribute data-tabs-position="bottom".


                    <ul class="bottom" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>

Vertical

To create vertical tabs add attribute data-tabs-position="vertical". To set tabs on right add attribute data-tabs-position="vertical right".

Left side


                    <ul data-tabs-position="vertical" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>

Right side


                    <ul data-tabs-position="vertical right" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>

Alignment

Use flex utilitarian classes to determine the position of tabs: .flex-justify-* with attribute data-cls-tabs.

Horizontal tabs alignment


                    <ul data-cls-tabs="flex-justify-start" data-role="tabs" data-expand="true">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>
                    <ul data-cls-tabs="flex-justify-center mt-2" data-role="tabs" data-expand="true">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>
                    <ul data-cls-tabs="flex-justify-end mt-2" data-role="tabs" data-expand="true">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>

Vertical tabs alignment


                    <ul data-tabs-position="vertical h-100" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                        <li class="disabled"><a href="#">Disabled</a></li>
                    </ul>

                    <ul data-tabs-position="vertical" data-cls-tabs="flex-justify-center h-100" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                        <li class="disabled"><a href="#">Disabled</a></li>
                    </ul>

                    <ul data-tabs-position="vertical" data-cls-tabs="flex-justify-end h-100" data-role="tabs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Links</a></li>
                        <li class="disabled"><a href="#">Disabled</a></li>
                    </ul>

Target content

Target content is determined automatically through the attribute href. If attribute href have a valid formed url address, then tab works as anchor.

A falsis, calceus altus racana. Heavens of emptiness will daily know a remarkable doer. When cooking soaked pumpkin seeds, be sure they are room temperature.

The shield is a post-apocalyptic nanomachine. Gar, never mark a fish. Instead of decorating sweet milk with avocado, use a handfull tablespoons salsa verde and one container rosemary plastic bag.

Cream soup is just not the same without basil and canned ground pork butts. Elogium prareres, tanquam alter species. Engage, extraterrestrial wind!

This is content for hidden tab from dropdown.


                    <ul data-role="tabs" data-expand="sm">
                        <li><a href="#_target_1">Home</a></li>
                        <li><a href="#_target_2">Profile</a></li>
                        <li><a href="#_target_3">Links</a></li>
                        <li class="disabled"><a href="#">Disabled</a></li>
                    </ul>
                    <div class="border bd-default no-border-top p-2">
                        <div id="_target_1">
                            A falsis, calceus altus racana.
                        </div>
                        <div id="_target_2">
                            The shield is a post-apocalyptic nanomachine.
                        </div>
                        <div id="_target_3">
                            Cream soup is just not the same without basil
                        </div>
                    </div>

Events

Plugin activated automaticaly when you add attribute data-role="tabs" to list. You can define callbacks for events: onTabsCreate over attribute data-on-tabs-create, onTab over attribute data-on-tab and on-before-tab for onBeforeTab.

Events	Data-*	Desc
`onBeforeTab(tab, elem)`	`data-on-before-tab`	This event occurs before the tab is opened if this function return false, tab is not open
`onTab(tab, elem)`	`data-on-tab`	This event occurs when the tab is opened
`onTabsCreate(tab, elem)`	`data-on-tabs-create`	This event occurs when the tabs is created

Custom classes

You can add your custom classes to any element of tabs component. To add classes, use attributes: data-cls-tabs, data-cls-tabs-list, data-cls-tabs-list-item

Additional tab types

From Metro 4 ver 4.2.29 you can set additional tab types for horizontal expanded tabs. To set it, use attribute data-tabs-type="...". You can use next values for this attributes: text, group, pills.

Text


                    <ul data-role="tabs" data-tabs-type="text" data-expand="true">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Editor</a></li>
                        <li><a href="#">Billing</a></li>
                    </ul>

Group


                    <ul data-role="tabs" data-tabs-type="group" data-expand="true">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Editor</a></li>
                        <li><a href="#">Billing</a></li>
                    </ul>

Pills


                    <ul data-role="tabs" data-tabs-type="pills" data-expand="true">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Editor</a></li>
                        <li><a href="#">Billing</a></li>
                    </ul>

Table of contents