Barmer Fractal

Tablist 

<ul class="m-tablist " role="tablist">
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-panel-1">Pflegeversicherung</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-2">Reportagen</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-3">Pflegeanleitungen</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-4" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-4">Fachlichen Informationen</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-5" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-5">Barmer-Geschäftsstellen</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-6" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-6">Ein sehr langes Label, das vielleicht zweizeilig umbrechen sollte</button>

    </li>
    <li class="tablist__item" role="presentation">
        <button class="a-btn btn--tab" type="button" id="btn-tab-7" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-7">Erfahrungsberichte</button>

    </li>
</ul>
 
<ul class="m-tablist {{viewtypes.specifier}}" role="tablist">
  {{#each partials.tabitems as |tabitem|}}
    <li class="tablist__item" role="presentation">
    {{#ifcond @index '<' ../switches.itemsCount}}
      {{ render '@button--tab' tabitem merge=true }}
    {{/ifcond}}
    </li>
  {{/each}}
</ul>
 
{
  "switches": {
    "itemsCount": 7
  },
  "viewtypes": {},
  "content": {},
  "partials": {
    "tabitems": [
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-1",
          "attributes": "id=\"btn-tab-1\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\"",
          "label": "Pflegeversicherung"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-2",
          "attributes": "id=\"btn-tab-2\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Reportagen"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-3",
          "attributes": "id=\"btn-tab-3\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Pflegeanleitungen"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-4",
          "attributes": "id=\"btn-tab-4\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Fachlichen Informationen"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-5",
          "attributes": "id=\"btn-tab-5\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Barmer-Geschäftsstellen"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-6",
          "attributes": "id=\"btn-tab-6\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Ein sehr langes Label, das vielleicht zweizeilig umbrechen sollte"
        }
      },
      {
        "content": {
          "type": "button",
          "ariaControls": "tab-panel-7",
          "attributes": "id=\"btn-tab-7\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\"",
          "label": "Erfahrungsberichte"
        }
      }
    ]
  }
}

No notes defined.