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 classes: .tabs-expand, .tabs-expand-sm, .tabs-expand-md, .tabs-expand-lg, .tabs-expand-xl, .tabs-expand-xxl.


                    <ul 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 class="tabs-expand-md" data-role="tabs">
                    ...
                    </ul>
                

                    <ul class="bottom" 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>
                

Vertical

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

Left side


                    <ul class="vertical" 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>
                

Right side


                    <ul class="vertical right" 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>
                

Alignment

Use flex utilitarian classes to determine the position of tabs: .flex-justify-*.

Horizontal tabs alignment


                    <ul class="flex-justify-start" 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 class="flex-justify-center mt-2" 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 class="flex-justify-end mt-2" 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>
                

Vertical tabs alignment


                    <ul class="vertical place-left" 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 class="vertical flex-justify-center ml-2 place-left" 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 class="vertical flex-justify-end ml-2 place-left" 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">
                        <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