Tabs-menüü

Preview 
<ul class="tab ">
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 1
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 2
                </a>
    </li>
    <li class="tab__item is-selected">
        <a href="#">
                <i class="icon-"></i>
                Tab 3
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Erakordselt pika pealkirjaga tab
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 5
                </a>
    </li>
</ul>
 
{
  "tabs": [
    {
      "name": "Tab 1"
    },
    {
      "name": "Tab 2"
    },
    {
      "name": "Tab 3",
      "active": true
    },
    {
      "name": "Erakordselt pika pealkirjaga tab"
    },
    {
      "name": "Tab 5"
    }
  ]
}

Vertikaalne

Preview 
<ul class="tab tab--vertical">
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 1
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 2
                </a>
    </li>
    <li class="tab__item is-selected">
        <a href="#">
                <i class="icon-"></i>
                Tab 3
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Erakordselt pika pealkirjaga tab
                </a>
    </li>
    <li class="tab__item ">
        <a href="#">
                <i class="icon-"></i>
                Tab 5
                </a>
    </li>
</ul>
 
{
  "tabs": [
    {
      "name": "Tab 1"
    },
    {
      "name": "Tab 2"
    },
    {
      "name": "Tab 3",
      "active": true
    },
    {
      "name": "Erakordselt pika pealkirjaga tab"
    },
    {
      "name": "Tab 5"
    }
  ],
  "tab-modifier": "tab--vertical"
}
  • Handle: @tabs--vertical
  • Tags:
  • Variants (2): default, vertical
  • Preview:
  • Filesystem Path: src/70-navigatsioon/tabs/tabs.hbs