Code Blender

An atomic Middleman partials library

Nav components, tabs and pills

  2. Molecule
  3. Nav components, tabs and pills

Tabs 

= codeBlender "nav", "molecule",
             { array: [ { url: "javascript:;", text: "Details" },
             { url:   "javascript:;", text: "Download"} ] }

<nav role='navigation'>
<ul class='nav nav-tabs'>
<li class='active nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Details
</a></li>
<li class='nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Download
</a></li>
</ul>
</nav>

Pills 

= codeBlender "nav", "molecule",
             { pills: true,
               array: [ { url: "javascript:;", text: "Details" },
                        { url: "javascript:;", text: "Download"} ] }

<nav role='navigation'>
<ul class='nav nav-pills'>
<li class='active nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Details
</a></li>
<li class='nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Download
</a></li>
</ul>
</nav>

Stackable pills With icons 

= codeBlender "nav", "molecule",
             { active:  "GitHub",
               pills:   true,
               stacked: true,
               array:   [ { icon: { prepend: { icon: "fa fa-credit-card" } }, url: "javascript:;", text: "Details" },
                          { url: "javascript:;", text: "Download" },
                          { icon: { append: { icon: "fa fa-github" } }, url: "javascript:;", text: "GitHub"} ] }

<nav role='navigation'>
<ul class='nav nav-pills nav-stacked'>
<li class='nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false"><span class='fa fa fa-credit-card'></span>


Details
</a></li>
<li class='nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Download
</a></li>
<li class='active nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">GitHub
<span class='fa fa fa-github'></span>


</a></li>
</ul>
</nav>

Justified pills With disabled link 

= codeBlender "nav", "molecule",
             { pills:      true,
               extraClass: "nav-justified",
               array:      [ { url: "javascript:;", text: "Details" },
                             { url: "javascript:;", text: "Download" },
                             { extraClass: "disabled", url: "javascript:;", text: "GitHub"} ] }

<nav role='navigation'>
<ul class='nav nav-justified nav-pills'>
<li class='active nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Details
</a></li>
<li class='nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">Download
</a></li>
<li class='disabled nav__segment' role='presentation'>
<a href="javascript:;" data-toggle="false">GitHub
</a></li>
</ul>
</nav>

Resources Useful websites and tutorials

Title URL
Bootstrap nav http://getbootstrap.com/components/#nav

Tasks

Task Date
Put a dropdown example in here also
Add the options for the toggle tabs
Create some style changes for these
Add the options for the toggle tabs
Sort out how the active element should be created in the list or on the UL
Allow this to also accept an angular NG-Repeat
Need to work out how to expand the code section for several partials like tabs and tab content