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
-
Uplynulý deň
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 3 0 Paul Farmer 1 0 Rita Patel 2 0 Uplynulý deň
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 3 0 Paul Farmer 1 0 Rita Patel 2 0 -
Uplynulý týždeň
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 24 18 Paul Farmer 16 20 Rita Patel 24 27 Uplynulý týždeň
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 24 18 Paul Farmer 16 20 Rita Patel 24 27 -
Uplynulý mesiac
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 98 95 Paul Farmer 122 131 Rita Patel 126 142 Uplynulý mesiac
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 98 95 Paul Farmer 122 131 Rita Patel 126 142 -
Uplynulý rok
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 1380 1472 Paul Farmer 1129 1083 Rita Patel 1539 1265 Uplynulý rok
Manažér prípadu Otvorené prípady Uzavreté prípady David Francis 1380 1472 Paul Farmer 1129 1083 Rita Patel 1539 1265
<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" aria-expanded="false" text-for-show="Uplynulý deň akordeón je otvorený" text-for-hide="Uplynulý deň akordeón je zatvorený" aria-label="Uplynulý deň akordeón je zatvorený" >
Uplynulý deň
<span class="idsk-tabs__tab-arrow-mobile"></span>
</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" aria-expanded="false" text-for-show="Uplynulý týždeň akordeón je otvorený" text-for-hide="Uplynulý týždeň akordeón je zatvorený" aria-label="Uplynulý týždeň akordeón je zatvorený" >
Uplynulý týždeň
<span class="idsk-tabs__tab-arrow-mobile"></span>
</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" aria-expanded="false" text-for-show="Uplynulý mesiac akordeón je otvorený" text-for-hide="Uplynulý mesiac akordeón je zatvorený" aria-label="Uplynulý mesiac akordeón je zatvorený" >
Uplynulý mesiac
<span class="idsk-tabs__tab-arrow-mobile"></span>
</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" aria-expanded="false" text-for-show="Uplynulý rok akordeón je otvorený" text-for-hide="Uplynulý rok akordeón je zatvorený" aria-label="Uplynulý rok akordeón je zatvorený" >
Uplynulý rok
<span class="idsk-tabs__tab-arrow-mobile"></span>
</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.