Skip to content

Tabs

We use Tabs component to offer structured views of information to users.

Standard tabs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="nav nav-tabs ez-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#ez-tab-location-view-content" role="tab" aria-controls="ez-tab-location-view-content" aria-expanded="1">View</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-details" role="tab" aria-controls="ez-tab-location-view-details" aria-expanded="1">Details</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-versions" role="tab" aria-controls="ez-tab-location-view-versions" aria-expanded="1">Versions</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-locations" role="tab" aria-controls="ez-tab-location-view-locations" aria-expanded="1">Locations</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-relations" role="tab" aria-controls="ez-tab-location-view-relations" aria-expanded="1">Relations</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-translations" role="tab" aria-controls="ez-tab-location-view-translations" aria-expanded="1">Translations</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-urls" role="tab" aria-controls="ez-tab-location-view-urls" aria-expanded="1">URL</a>
    </li>
</ul>

Note

Standard tabs component will have a darker background, ez-header, in the application that will enhance active tab's color contrast.

Read the Docs