Webové komponenty

Záložky

Komponent záložky umožňuje používateľom prechádzať medzi súvisiacimi časťami obsahu, pričom sa zobrazuje vždy jedna časť.

Kedy použiť tento komponet

Záložky môžu byť užitočným spôsobom, ako používateľom umožniť rýchle prepínanie medzi súvisiacimi informáciami, ak:

  • môže byť Váš obsah užitočne rozdelený do jasne označených sekcií,
  • je prvá časť pre väčšinu používateľov dôležitejšia ako ostatné,
  • používatelia nebudú potrebovať zobraziť všetky sekcie naraz.

Záložky môžu dobre slúžiť pre používateľov, ktorí používajú dané informácie pravidelne, napríklad aktuálny covid automat.

Kedy nepoužívať tento komponent

Nepoužívajte záložky ako formu navigácie na stránke. Príliš veľa obsahu v záložkách môže spôsobiť pomalé načítavanie stránky, v takomto prípade zvážte vytvorenie samostatných podstránok pre obsah alebo inú formu zobrazenia na stránke, napríklad cez štrukturované nadpisy.

Záložky skrývajú obsah pred používateľmi a nie každý si ich všimne alebo pochopí, ako fungujú.

Nepoužívajte záložky, ak by používatelia mohli potrebovať:

  • prečítať si celý obsah, aby napríklad pochopili postup krok za krokom,
  • porovnať informácie na rôznych kartách - nutnosť zapamätať si informácie a prepínať medzi nimi dozadu a dopredu môže byť frustrujúca a náročná.

Najprv otestujte obsah bez záložiek. Zvážte, či je lepšie:

  • zjednodušiť a zredukovať množstvo obsahu,
  • rozdeliť obsah na viacero stránok,
  • ponechať obsah na jednej stránke, oddelený nadpismi.

Záložky, akordeóny a skrytý text

Záložky, akordeóny a skrytý text - tieto komponenty skrývajú časti obsahu a používateľ si ich môže zobraziť podľa potreby.

Ak používatelia nepotrebujú naraz zobraziť viac ako jednu sekciu, zvážte použitie záložiek namiesto akordeónu.

Mali by ste zohľadniť aj počet sekcií obsahu. Záložky sú usporiadané horizontálne (na desktope), takže sa do nich nezmestí toľko sekcií ako do akordeónov, ktoré sa zobrazujú vertikálne.

Karty môžu lepšie fungovať pre používateľov, ktorí potrebujú rýchlo prepínať medzi 2 sekciami.

Ak existuje viacero súvisiacich častí obsahu, zvážte použitie záložiek namiesto komponentu skrytý obsah. Komponent skrytý obsah môže byť lepší, ak máte len 1 alebo 2 časti obsahu, zároveň je menej vizuálne nápadný ako záložky, takže má tendenciu fungovať lepšie pre obsah, ktorý nie je pre používateľov taký dôležitý.

Použitie záložiek

Na desktope sa záložky zobrazujú v riadku. Pri mobilnom zobrazení sa záložky zobrazia pod sebou a fungujú podobne ako komponent akordeón.

Contents

<div class="idsk-tabs" data-module="idsk-tabs">
  <h2 class="idsk-tabs__title">
    Contents
  </h2>
  <ul class="idsk-tabs__list">
        <li class="idsk-tabs__list-item idsk-tabs__list-item--selected">
          <a class="idsk-tabs__tab" href="#uplynuly-den" title="Uplynulý deň" item="0">
            Uplynulý deň
          </a>
        </li>
        <li class="idsk-tabs__list-item">
          <a class="idsk-tabs__tab" href="#uplynuly-tyzden" title="Uplynulý týždeň" item="1">
            Uplynulý týždeň
          </a>
        </li>
        <li class="idsk-tabs__list-item">
          <a class="idsk-tabs__tab" href="#uplynuly-mesiac" title="Uplynulý mesiac" item="2">
            Uplynulý mesiac
          </a>
        </li>
        <li class="idsk-tabs__list-item">
          <a class="idsk-tabs__tab" href="#uplynuly-rok" title="Uplynulý rok" item="3">
            Uplynulý rok
          </a>
        </li>
  </ul>
  
  <ul class="idsk-tabs__list--mobile" role="tablist">
        <li class="idsk-tabs__list-item--mobile" role="presentation">
          <button class="govuk-caption-l idsk-tabs__mobile-tab" item="0" role="tab" aria-controls="uplynuly-den" aria-selected="false" href="#uplynuly-den">
            Uplynulý deň
            <div class="idsk-tabs__tab-arrow-mobile"></div>
          </button>
          <section class="idsk-tabs__panel" id="uplynuly-den">
            <div class="idsk-tabs__panel-content">
              
                <h2 class='govuk-heading-l'>Uplynulý deň</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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="idsk-tabs__mobile-tab-content idsk-tabs__mobile-tab-content--hidden">
              
                <h2 class='govuk-heading-l'>Uplynulý deň</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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>
          </section>
        </li>
        <li class="idsk-tabs__list-item--mobile" role="presentation">
          <button class="govuk-caption-l idsk-tabs__mobile-tab" item="1" role="tab" aria-controls="uplynuly-tyzden" aria-selected="false" href="#uplynuly-tyzden">
            Uplynulý týždeň
            <div class="idsk-tabs__tab-arrow-mobile"></div>
          </button>
          <section class="idsk-tabs__panel idsk-tabs__panel--hidden" id="uplynuly-tyzden">
            <div class="idsk-tabs__panel-content">
              
                <h2 class='govuk-heading-l'>Uplynulý týždeň</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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="idsk-tabs__mobile-tab-content idsk-tabs__mobile-tab-content--hidden">
              
                <h2 class='govuk-heading-l'>Uplynulý týždeň</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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>
          </section>
        </li>
        <li class="idsk-tabs__list-item--mobile" role="presentation">
          <button class="govuk-caption-l idsk-tabs__mobile-tab" item="2" role="tab" aria-controls="uplynuly-mesiac" aria-selected="false" href="#uplynuly-mesiac">
            Uplynulý mesiac
            <div class="idsk-tabs__tab-arrow-mobile"></div>
          </button>
          <section class="idsk-tabs__panel idsk-tabs__panel--hidden" id="uplynuly-mesiac">
            <div class="idsk-tabs__panel-content">
              
                <h2 class='govuk-heading-l'>Uplynulý mesiac</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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="idsk-tabs__mobile-tab-content idsk-tabs__mobile-tab-content--hidden">
              
                <h2 class='govuk-heading-l'>Uplynulý mesiac</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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>
          </section>
        </li>
        <li class="idsk-tabs__list-item--mobile" role="presentation">
          <button class="govuk-caption-l idsk-tabs__mobile-tab" item="3" role="tab" aria-controls="uplynuly-rok" aria-selected="false" href="#uplynuly-rok">
            Uplynulý rok
            <div class="idsk-tabs__tab-arrow-mobile"></div>
          </button>
          <section class="idsk-tabs__panel idsk-tabs__panel--hidden" id="uplynuly-rok">
            <div class="idsk-tabs__panel-content">
              
                <h2 class='govuk-heading-l'>Uplynulý rok</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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 class="idsk-tabs__mobile-tab-content idsk-tabs__mobile-tab-content--hidden">
              
                <h2 class='govuk-heading-l'>Uplynulý rok</h2>
                <table class='govuk-table'>
                <thead class='govuk-table__head'>
                    <tr class='govuk-table__row'>
                    <th class='govuk-table__header' scope='col'>Manažér prípadu</th>
                    <th class='govuk-table__header' scope='col'>Otvorené prípady</th>
                    <th class='govuk-table__header' scope='col'>Uzavreté prípady</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>
          </section>
        </li>
  </ul>
</div>

Použite jednoznačné názvy záložiek

Záložky skrývajú obsah, preto musia popisy na záložkách jasne popisovať, na čo odkazujú, inak používatelia nebudú vedieť, či na ne majú kliknúť.

Ak máte problém vymyslieť jasné názvy záložiek, môže to byť spôsobené tým, že spôsob, akým ste oddelili obsah, nie je jasný.

Usporiadajte karty podľa potrieb používateľov

Prvá karta by mala byť najčastejšie potrebnou časťou. Ostatné karty usporiadajte v poradí, ktoré dáva používateľom najväčší zmysel.

Nevypínajte karty

Zakázanie prvkov je pre používateľov zvyčajne mätúce. Ak sa na karte nenachádza žiadny obsah, buď kartu odstráňte, alebo, ak by to bolo pre používateľov mätúce, vysvetlite, prečo sa na karte nenachádza žiadny obsah, keď je vybratá.

Vyhnite sa záložkám, ktoré sa prekrývajú cez viac ako jeden riadok

Ak používate príliš veľa kariet alebo majú dlhé označenia, môžu sa obaliť cez viac ako jeden riadok. Používatelia tak ťažšie vidia spojenie medzi vybranou kartou a jej obsahom.