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

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