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.

Dashboard tabs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<ul class="nav nav-tabs ez-tabs" role="tablist" id="ez-tab-list-dashboard-my">
    <li class="nav-item">
        <a class="nav-link active" id="ez-tab-label-dashboard-my" data-toggle="tab" href="#ez-tab-dashboard-my-my-drafts" role="tab" aria-controls="ez-tab-dashboard-my-my-drafts" aria-expanded="1">Drafts</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="ez-tab-label-dashboard-my" data-toggle="tab" href="#ez-tab-dashboard-my-my-scheduled" role="tab" aria-controls="ez-tab-dashboard-my-my-scheduled" aria-expanded>My scheduled</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="ez-tab-label-dashboard-my" data-toggle="tab" href="#ez-tab-dashboard-my-my-content" role="tab" aria-controls="ez-tab-dashboard-my-my-content" aria-expanded>Content</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="ez-tab-label-dashboard-my" data-toggle="tab" href="#ez-tab-dashboard-my-my-media" role="tab" aria-controls="ez-tab-dashboard-my-my-media" aria-expanded>Media</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="ez-tab-label-dashboard-my" data-toggle="tab" href="#ez-tab-dashboard-my-my-drafts-under-review" role="tab" aria-controls="ez-tab-dashboard-my-my-drafts-under-review" aria-expanded>Drafts under review</a>
    </li>
</ul>

Note

Specific styling classes for Dashboard tabs component will be applied automatically.

Read the Docs