Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Tabs enable content organisation at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual screen support, and workspace customisation.
Types
| Type | Example |
|---|---|
Main Tabs Use it as a tabbed navigation - Single row above their associated content |  |
2nd Level Tabs Single row above their associated content |  |
Details Pane Tabs Single row above their associated content in the details pane |  |
Ribbon Tabs | TBD |
Usage & Behavior
Present tabs as a single row above their associated content.Tabs can be switched by clicking on a different tab.
Each tab label describes the content contained within it. Labels are concise and use no more than two words. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in tab labels.
Labels
- Each tab label describes its content and sets user expectations.
- Tabs with related content should be grouped adjacent to each other
- Labels are concise and use one to two words maximum.
- Tab labels should succinctly describe the content within.
- Icons are not permitted in tab labels.
Structure
The horizontal layout of the tab bar never changes. The tabs always appear side by side
The NavigationView pane can contain:
- Navigation items
- Separators
Number of tabs
A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.
Order
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
Implement the focus as follows
- By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended. - Later on, you can show the tab last selected by the user.
Additional guidelines
- Do not display a loading indicator above the tab while the number for the item count is loading.
- Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
- Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.
States
Main tabs | 2nd level tabs | Details pane tabs | Ribbon tabs |
|---|---|---|---|
 |  |  |  |
Current appearances in our products
Resources
https://tympanus.net/Development/TabStylesInspiration/
https://material.io/guidelines/components/tabs.html
Needs to be designed
TBD - Open issues
- Maximum tab number - vertical and horizontal
- Scroll tab - out of the window
- Tab + Filter - how it works together
- Align tab solutioan between mobile and desktop (card / line)
- Tab title - text / icon / icon and title
- Missing connection between the current tab to the content area in horizontal
- Decide about maximum letter on title
Next Steps/Tasks
- UX design
- To see full view of tab with other components
- General suggestion - implementation more interaction for update system to today design
New LUX design
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Main Tabs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
<div class="tab-content">
<div id="design" class="tab-pane fade active show"></div>
<div id="collect" class="tab-pane fade"></div>
<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
</li>
</ul>
<div class="tab-content">
<div id="design" class="tab-pane fade active show"></div>
<div id="collect" class="tab-pane fade"></div>
<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
| Table of Contents | ||||
|---|---|---|---|---|
|