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.

                    <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.