8 Multi-Tab Editor

The Multi-tab editor is recommended to collect information with multiple dimentions. Like messages in different languages, prices in different currencies, etc.

8.1 Usage Guidelines

One of the main uses of the Multi-Tab Editor component is to collect information that can be displaye in more than one language.

The main elements of the Multi-tab Editor is a row of tabs and a input element bellow. The tabs change the context of the input element, allowing to enter the same information in multiple dimentions.

To make the Multi-tab Editor works correctly on small mobile devices, you have to take care and put the important tabs visible and the other ones inside the "MORE" submenu. That will depends on your implementation and the actual length of the tabs labels.

<label class="control-label">Field Label</label>
<div class="form-group multi-tabs-editor">
   <ul class="nav nav-tabs multi-tabs">
       <li class="active"><a class="is-required">EN</a></li>
       <li><a href="#" class="is-required">DE</a></li>
       <li class="more-tab">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
               <span class="multi-tabs__more-span">MORE</span>
               <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">FR</a></li>
               <li><a href="#">BG</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">DA</a></li>
               <li><a href="#">IT</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">FR</a></li>
           </ul>
       </li>
   </ul>
   <div class="form-group">
       <div class="property">
           <input name="lastName" type="text" class="form-control input-lg" value="Men Walk On Moon"/>
       </div>
   </div>
</div>

8.2 MORE menu selected

The MORE menu dropdown contains additional locales. When locale is selected from the MORE menu, it displays as the active tab in place of the MORE label. The dropdown arrow displays next to the locale name to indicate it functions as a dropdown. If any locales under the MORE menu are required, an asterisk (*) displays next to the locale name in the dropdown list.

<label class="control-label">Field Label</label>
<div class="form-group multi-tabs-editor">
   <ul class="nav nav-tabs multi-tabs">
       <li><a href="#" class="is-required">EN</a></li>
       <li><a href="#"class="is-required">DE</a></li>
       <li class="more-tab active">
           <a href="#" class="dropdown-toggle" 
              data-toggle="dropdown" aria-expanded="false">
               IT
               <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">FR</a></li>
               <li><a href="#">DA</a></li>
               <li><a href="#">NL</a></li>
               <li><a href="#">BG</a></li>
               <li><a href="#">IT</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">FR</a></li>
           </ul>
       </li>
   </ul>
   <div class="form-group">
       <div class="property">
           <input name="lastName" type="text" class="form-control input-lg" value="Gli uomini camminare sulla Luna">
       </div>
   </div>
</div>

8.2.1 Static View

The Multi-tab Editor can also be used to display static information.

Static Info

<label class="control-label">Field Label</label>
<div class="form-group multi-tabs-editor">
   <ul class="nav nav-tabs multi-tabs">
       <li class="active"><a href="#" class="is-required">EN</a></li>
       <li> <a href="#" class="is-required">DE</a></li>
       <li class="more-tab">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           <span class="multi-tabs__more-span">MORE</span>
           <span class="caret"></span>
         </a>
           <ul class="dropdown-menu">
               <li><a href="#">FR</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">DA</a></li>
               <li><a href="#">BG</a></li>
               <li><a href="#">IT</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">FR</a></li>
           </ul>
       </li>
   </ul>
   <div class="form-group">
       <div class="property">
           <p class="form-readonly-text"> Static Info</p>
       </div>
   </div>
</div>

8.3 Displaying Errors for Inactive tab

On validation, if one or more locales has an error, display "One or more locales required” in red text below the field.

For unselected tabs with errors, display the tab background as white, the locale name in red text, and a red exclamation mark (!) next to locale name.

One or more locales required 
<label>Field Label</label>
<div class="form-group multi-tabs-editor">
   <ul class="nav nav-tabs multi-tabs">
       <li class="active"><a href="#" class="is-required">EN</a></li>
       <li class="has-error"> <a href="#" class="is-required">DE</a></li>
       <li class="more-tab">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
           <span class="multi-tabs__more-span">MORE</span>
           <span class="caret"></span>
         </a>
           <ul class="dropdown-menu">
               <li><a href="#">FR</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">DA</a></li>
               <li><a href="#">BG</a></li>
               <li><a href="#">IT</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">FR</a></li>
           </ul>
       </li>
   </ul>
   <div class="form-group">
       <div class="property">
           <input name="lastName" type="text" class="form-control input-lg">
           <span class="inline-hint-text inline-hint-text__error">One or more locales required</span>
       </div>
   </div>
</div>

8.4 Displaying Errors for Active Tab

For a selected tab with an error, display the tab background as red and a red exclamation mark (!) next to the locale name.

German required 
<label>Field Label</label>
<div class="form-group multi-tabs-editor">
    <ul class="nav nav-tabs multi-tabs">
        <li> <a href="#" class="is-required">EN</a></li>
        <li class="active has-error"> <a href="#" class="is-required">DE</a></li>
        <li class="more-tab">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="multi-tabs__more-span">MORE</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">FR</a></li>
                <li><a href="#">PL</a></li>
                <li><a href="#">DA</a></li>
                <li><a href="#">BG</a></li>
                <li><a href="#">IT</a></li>
                <li><a href="#">PL</a></li>
                <li><a href="#">FR</a></li>
            </ul>
        </li>
    </ul>
    <div class="form-group">
        <div class="property">
            <input name="lastName" type="text" class="form-control input-lg has-error">
            <span class="inline-hint-text inline-hint-text__error">German required</span>
        </div>
    </div>
</div>

8.5 Displaying Errors within the MORE MENU

If another tab is selected and the More menu has one or more locales with errors, display the More text in red on a white background with a red exclamation(!) mark next to it.

One or more locales required 
<label>Field Label</label>
<div class="form-group multi-tabs-editor">
    <ul class="nav nav-tabs multi-tabs">
       <li> <a href="#" class="is-required">EN</a></li>
       <li class="active"> <a href="#" class="is-required">DE</a></li>
       <li class="more-tab has-error">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="multi-tabs__more-span">MORE</span>
               <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li><a href="#">FR</a></li>
               <li><a href="#">PL</a></li>
               <li><a href="#">DA</a></li>
               <li><a href="#">BG</a></li>
               <li><a href="#">IT</a></li>
               <li class="has-error"><a href="#" class="is-required">PL</a></li>
               <li><a href="#">FR</a></li>
           </ul>
       </li>
   </ul>
   <div class="form-group">
       <div class="property">
           <input name="lastName" type="text" class="form-control input-lg">
           <span class="inline-hint-text inline-hint-text__error">One or more locales required</span>
       </div>
   </div>
</div>

8.6 Displaying Errors within the MORE MENU Selected

If the selected locale in the MORE menu position has an error, display the tab with a red background and a red exclamation mark (!) next to the locale name.

If additional locales under the more menu have errors, display the locale name in red text with an exclamation next it.

Polish required 
   <label>Field Label</label>
   <div class="form-group multi-tabs-editor">
       <div class="multi-tabs-header clearfix">
           <ul class="nav nav-tabs multi-tabs">
               <li> <a href="#" class="is-required">EN</a></li>
               <li> <a href="#" class="is-required">DE</a></li>
               <li class="more-tab active has-error">
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                       <span class="multi-tabs__more-span">PL</span>
                       <span class="caret"></span>
                   </a>
                   <ul class="dropdown-menu">
                       <li><a href="#">FR</a></li>
                       <li><a href="#">PL</a></li>
                       <li><a href="#">DA</a></li>
                       <li><a href="#">BG</a></li>
                       <li><a href="#">IT</a></li>
                       <li class="active has-error"><a href="#" class="is-required">PL</a></li>
                       <li><a href="#">FR</a></li>
                   </ul>
               </li>
           </ul>
       </div>
       <div class="form-group">
           <div class="property">
               <input name="lastName" type="text" class="form-control input-lg">
               <span class="inline-hint-text inline-hint-text__error">Polish required</span>
           </div>
       </div>
   </div>

8.7 Currencies Use Case

Other use of the Multi-tab editor pattern is to collect prices on different currencies

8.8 Regions Use Case

The Multi-tab editor can also be used to collect information on different regions.

8.9 LocalizationExample

Visual Guidelines

single

Page level

 multi

Field level

 
 <div class="text-left thumbnails">
     <a class="js_fullscreen text-center" data-toggle="modal" data-id="../images/fullscreen/local_page-level.png" title="View Full Image" href="#viewFullscreen">
         <img src="../images/thumbnails/local_thumbnail.png" alt="single" class="img-thumbnail">
         <p>Page level</p>
     </a>
     <a class="js_fullscreen text-center" data-toggle="modal" data-id="../images/fullscreen/local_field-level.png" title="View Full Image" href="#viewFullscreen">
         <img src="../images/thumbnails/field-level_thumbnail.png" alt="multi" class="img-thumbnail">
         <p>Field level</p>
     </a>
 </div>
</div>
 <div class="modal fade bs-example-modal-lg" id="viewFullscreen">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div>
        <img src="" class="showFullscreen">
      </div>
    </div>
  </div>