d-md-components/tabs/views/index.html

A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).

<index: arrays="tab" attributes="selectedTab class errorList">
  <div class="tabs{{if class}} {{class}}{{/if}}">
    {{each @tab as #tab, #index}}
      <div on-create="tabHeaders.create($element, #index)"
           class="tab-header{{if #index === selectedTab}} tab-header-selected{{/if}}{{if tabs[#index].hide}} invisible{{/if}}{{if #index !== selectedTab && isInvalid(errorList, #index)}} tabs---header--error{{/if}}"
           on-click="selectTab(#index)">
        {{#tab.label}}
      </div>
    {{/each}}
    <div class="tabs-border"></div>
    <div class="tabs-underline" 
         style="width: {{tabsUnderline.width}}px; left: {{tabsUnderline.left}}px"></div>
    <div class="tab-content-container" style="position: relative; width: {{100 * tab.length}}%; left: -100%">
      {{each @tab as #tab, #index}}
        <div on-create="tabContents.create($element, #index)"
             class="tab-content 
                    {{if #index === selectedTab}}tab-selected{{/if}}
                    {{if #index > selectedTab}}tab-after-selected{{/if}}
                    {{if selectedTab > #index}}tab-before-selected{{/if}}
                    {{if animating}}animating{{/if}}"
             style="width:calc(100% /{{tab.length}});
                    max-height:{{if animating}}{{viewHeight}}px{{/if}};
                    left:
                      {{if #index === selectedTab}}{{tabPositions[#index].selected}}%{{/if}}
                      {{if #index > selectedTab}}{{tabPositions[#index].after}}%{{/if}}
                      {{if selectedTab > #index}}{{tabPositions[#index].before}}%{{/if}}">
          {{#tab.content}}
        </div>
      {{/each}}
    </div>
  </div>