Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Tabs

Tabs

Code

Markup

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>
  <ul class="govuk-tabs__list">
        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
          <a class="govuk-tabs__tab" href="#past-day">
            Past day
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#past-week">
            Past week
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#past-month">
            Past month
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#past-year">
            Past year
          </a>
        </li>
  </ul>
      <div class="govuk-tabs__panel" id="past-day">
        <h2 class="govuk-heading-l">Past day</h2>
<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Case manager</th>
      <th class="govuk-table__header" scope="col">Cases opened</th>
      <th class="govuk-table__header" scope="col">Cases closed</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">David Francis</td>
      <td class="govuk-table__cell">3</td>
      <td class="govuk-table__cell">0</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Paul Farmer</td>
      <td class="govuk-table__cell">1</td>
      <td class="govuk-table__cell">0</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Rita Patel</td>
      <td class="govuk-table__cell">2</td>
      <td class="govuk-table__cell">0</td>
    </tr>
  </tbody>
</table>

      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
        <h2 class="govuk-heading-l">Past week</h2>
<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Case manager</th>
      <th class="govuk-table__header" scope="col">Cases opened</th>
      <th class="govuk-table__header" scope="col">Cases closed</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">David Francis</td>
      <td class="govuk-table__cell">24</td>
      <td class="govuk-table__cell">18</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Paul Farmer</td>
      <td class="govuk-table__cell">16</td>
      <td class="govuk-table__cell">20</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Rita Patel</td>
      <td class="govuk-table__cell">24</td>
      <td class="govuk-table__cell">27</td>
    </tr>
  </tbody>
</table>

      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
        <h2 class="govuk-heading-l">Past month</h2>
<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Case manager</th>
      <th class="govuk-table__header" scope="col">Cases opened</th>
      <th class="govuk-table__header" scope="col">Cases closed</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">David Francis</td>
      <td class="govuk-table__cell">98</td>
      <td class="govuk-table__cell">95</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Paul Farmer</td>
      <td class="govuk-table__cell">122</td>
      <td class="govuk-table__cell">131</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Rita Patel</td>
      <td class="govuk-table__cell">126</td>
      <td class="govuk-table__cell">142</td>
    </tr>
  </tbody>
</table>

      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
        <h2 class="govuk-heading-l">Past year</h2>
<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Case manager</th>
      <th class="govuk-table__header" scope="col">Cases opened</th>
      <th class="govuk-table__header" scope="col">Cases closed</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">David Francis</td>
      <td class="govuk-table__cell">1380</td>
      <td class="govuk-table__cell">1472</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Paul Farmer</td>
      <td class="govuk-table__cell">1129</td>
      <td class="govuk-table__cell">1083</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">Rita Patel</td>
      <td class="govuk-table__cell">1539</td>
      <td class="govuk-table__cell">1265</td>
    </tr>
  </tbody>
</table>

      </div>
</div>

Macro

{% from "tabs/macro.njk" import govukTabs %}

{{ govukTabs({
  "items": [
    {
      "label": "Past day",
      "id": "past-day",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">3</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">2</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n  </tbody>\n</table>\n"
      }
    },
    {
      "label": "Past week",
      "id": "past-week",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">18</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">16</td>\n      <td class=\"govuk-table__cell\">20</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">27</td>\n    </tr>\n  </tbody>\n</table>\n"
      }
    },
    {
      "label": "Past month",
      "id": "past-month",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">98</td>\n      <td class=\"govuk-table__cell\">95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">122</td>\n      <td class=\"govuk-table__cell\">131</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">126</td>\n      <td class=\"govuk-table__cell\">142</td>\n    </tr>\n  </tbody>\n</table>\n"
      }
    },
    {
      "label": "Past year",
      "id": "past-year",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Past year</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">1380</td>\n      <td class=\"govuk-table__cell\">1472</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1129</td>\n      <td class=\"govuk-table__cell\">1083</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">1539</td>\n      <td class=\"govuk-table__cell\">1265</td>\n    </tr>\n  </tbody>\n</table>\n"
      }
    }
  ]
}) }}

Tabs tabs-with-anchor-in-panel

(open in a new window)

Ensure that anchors that are in tab panels work correctly

Code

Markup

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>
  <ul class="govuk-tabs__list">
        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
          <a class="govuk-tabs__tab" href="#tab-1">
            Tab 1
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#tab-2">
            Tab 2
          </a>
        </li>
  </ul>
      <div class="govuk-tabs__panel" id="tab-1">
        <h2 class="govuk-heading-l">Tab 1</h2>
<p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
<p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
<p class="govuk-body"><a id="anchor" tabIndex="0">Anchor Point</a></p>

      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
        <h2 class="govuk-heading-l">Tab 2</h2>

      </div>
</div>

Macro

{% from "tabs/macro.njk" import govukTabs %}

{{ govukTabs({
  "items": [
    {
      "label": "Tab 1",
      "id": "tab-1",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabIndex=\"0\">Anchor Point</a></p>\n"
      }
    },
    {
      "label": "Tab 2",
      "id": "tab-2",
      "panel": {
        "html": "<h2 class=\"govuk-heading-l\">Tab 2</h2>\n"
      }
    }
  ]
}) }}