Ember x tabs bar style

ember-x-tabs-bar.hbs

{{#x-tab  tab-style="tabs-style-bar" as |tab| }}

      {{!-- tab navigation --}}
      {{#x-tab/navigation}}
        {{#x-tab/nav-wrap paneId="home" tab=tab}}
          <i class="icon icon-home"></i>
          <span>Home</span>
        {{/x-tab/nav-wrap}}
        {{#x-tab/nav-wrap paneId="archive" tab=tab}}
          <i class="icon icon-box"></i>
          <span>Archive</span>
        {{/x-tab/nav-wrap}}
        {{#x-tab/nav-wrap paneId="analytics" tab=tab}}
          <i class="icon icon-display"></i>
          <span>Analytics</span>
        {{/x-tab/nav-wrap}}
        {{#x-tab/nav-wrap paneId="settings" tab=tab}}
          <i class="icon icon-tools"></i>
          <span>Settings</span>
        {{/x-tab/nav-wrap}}
        {{#x-tab/nav-wrap paneId="upload" tab=tab}}
          <i class="icon icon-upload"></i>
          <span>Upload</span>
        {{/x-tab/nav-wrap}}
      {{/x-tab/navigation}}

      {{!-- tab content --}}
      <div class="content-wrap">
        {{#tab.pane elementId="home"}}
          <h1>Home</h1>
          <p>This is home content</p>
        {{/tab.pane}}

        {{#tab.pane elementId="archive"}}
          <h1>Archive</h1>
          <p>This is archive content</p>
        {{/tab.pane}}
        {{#tab.pane elementId="analytics"}}
          <h1>Analytics</h1>
          <p>This is analytics content</p>
        {{/tab.pane}}
        {{#tab.pane elementId="settings"}}
          <h1>Settings</h1>
          <p>This is settings content</p>
        {{/tab.pane}}
        {{#tab.pane elementId="upload"}}
          <h1>Upload</h1>
          <p>This is upload content</p>
        {{/tab.pane}}
      </div>

    {{/x-tab}}