Časová os - timeline
Časovú os použite vtedy, keď chcete používateľom zobraziť chronologicky usporiadaný obsah. Používateľ sa rýchlo zorientuje vo vašom obsahu.
Zobrazujte 10 položiek časovej osi. Ak je ich viac, či do minulosti alebo do budúcnosti, umožnite ich zobraziť pomocou tlačidiel “Zobraziť staršie udalosti” a/alebo “Zobraziť budúce udalosti”.
Z čoho sa skladá časová os?
Časová os sa skladá z:
- popisu v ľavej časti - môže obsahovať dátum, čas, mesiac,
- vizuálnej časovej osi s guličkou,
- popisu v pravej časti - link alebo popis s udalosťou alebo časťou procesu, ktorý reprezentuje,
- vertikálneho oddeľovača s popisom - voliteľná časť - zoskupuje udalosti nachádzajúce sa pod ním,
- nadpisu - voliteľná časť,
- tlačidiel “Zobraziť staršie udalosti” a/alebo “Zobraziť budúce udalosti”.
Ako použiť časovú os?
Komponent časová os môžete použiť pre zobrazenie jedinečného obsahu, ktorý je možné chronologicky usporiadať do časového radu v jednej časovej osi (napr. zobrazenie podujatí, workshopov, tlačových konferencií, pracovných skupín a pod.). V prípade podujatí zobrazujte používateľom podujatia k aktuálnemu dňu a novšie. Staršie podujatia sú pre používateľa z hľadiska participácie na nich irelevantné, môže si ich však zobraziť.
Môžete ho taktiež použiť pri obsahu, ktorý vzájomne súvisí a je možné ho usporiadať do časového radu. Dobrý príkladom sú procesy. Niekde začínajú, majú trvanie a niekde končia. Napríklad legislatívny proces.
14.03.2021
8:30 - 12:00
8:30 - 12:00
marec 2021
16.03.2021
10:30 - 12:00
10:30 - 12:00
17.03.2021
8:30 - 12:00
8:30 - 12:00
máj 2021
Vybavenie rodného listu dieťaťa
18.03.2021
8:30 - 12:00
8:30 - 12:00
<div class="idsk-timeline " data-module="idsk-timeline">
<div class="govuk-container-width">
<div class="idsk-timeline__button__div">
<button type="button" class="idsk-timeline__button--back">
<svg class="idsk-timeline__button__svg--previous" width="20" height="15" viewbox="0 -2 25 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.2925 13.8005C7.6825 13.4105 7.6825 12.7805 7.2925 12.3905L3.4225 8.50047H18.5925C19.1425 8.50047 19.5925 8.05047 19.5925 7.50047C19.5925 6.95047 19.1425 6.50047 18.5925 6.50047H3.4225L7.3025 2.62047C7.6925 2.23047 7.6925 1.60047 7.3025 1.21047C6.9125 0.820469 6.2825 0.820469 5.8925 1.21047L0.2925 6.80047C-0.0975 7.19047 -0.0975 7.82047 0.2925 8.21047L5.8825 13.8005C6.2725 14.1805 6.9125 14.1805 7.2925 13.8005Z"
fill="#0065B3"/>
</svg>
Zobraziť minulé udalosti
</button>
</div>
<div class="idsk-timeline__content idsk-timeline__content__caption--long">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">14.03.2021</span>
<br>
<span class="idsk-timeline__content__time">8:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adid">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adid</a>
</div>
</div>
<div class="idsk-timeline__content ">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">15.03.2021</span>
<br>
<span class="idsk-timeline__content__time">9:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing">Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
</div>
<div class="idsk-timeline__content govuk-body">
<div class="idsk-timeline__left-side"></div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line"></span>
</div>
<div class="idsk-timeline__content__date-line">
<span class="idsk-timeline__content__text">marec 2021
</span>
</div>
</div>
<div class="idsk-timeline__content idsk-timeline__content__caption--long">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">16.03.2021</span>
<br>
<span class="idsk-timeline__content__time">10:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adid">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adid</a>
</div>
</div>
<div class="idsk-timeline__content idsk-timeline__content__caption--long">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">17.03.2021</span>
<br>
<span class="idsk-timeline__content__time">8:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt labor et labore. Lorem ipsum dolor sit amet, consectetur adipiscing">Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt labor et labore. Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
</div>
<div class="idsk-timeline__content govuk-body">
<div class="idsk-timeline__left-side"></div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line"></span>
</div>
<div class="idsk-timeline__content__date-line">
<span class="idsk-timeline__content__text">máj 2021
</span>
</div>
</div>
<div class="idsk-timeline__content idsk-timeline__content__title-div">
<div class="idsk-timeline__left-side"></div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line"></span>
</div>
<div class="idsk-timeline__content__title">
<h3 class="govuk-heading-m">Vybavenie rodného listu dieťaťa
</h3>
</div>
</div>
<div class="idsk-timeline__content idsk-timeline__content__caption--long">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">18.03.2021</span>
<br>
<span class="idsk-timeline__content__time">8:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt ut labore et labore. Lorem ipsum dolor sit">Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt ut labore et labore. Lorem ipsum dolor sit</a>
</div>
</div>
<div class="idsk-timeline__content ">
<div class="idsk-timeline__left-side">
<span class="govuk-body-m">19.03.2021</span>
<br>
<span class="idsk-timeline__content__time">8:30 - 12:00</span>
</div>
<div class="idsk-timeline__middle">
<span class="idsk-timeline__vertical-line--circle"></span>
</div>
<div class="idsk-timeline__content__caption">
<a class="govuk-link" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing">Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
</div>
<button type="button" class="idsk-timeline__button--forward">
Zobraziť budúce udalosti
<svg class="idsk-timeline__button__svg--next" width="20" height="13" viewbox="-5 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.5558 0.281376C12.1577 0.666414 12.1577 1.2884 12.5558 1.67344L16.5063 5.51395L1.0208 5.51395C0.45936 5.51395 1.90735e-06 5.95823 1.90735e-06 6.50123C1.90735e-06 7.04424 0.45936 7.48851 1.0208 7.48851L16.5063 7.48851L12.5456 11.3192C12.1475 11.7042 12.1475 12.3262 12.5456 12.7112C12.9437 13.0963 13.5868 13.0963 13.9849 12.7112L19.7014 7.19233C20.0995 6.80729 20.0995 6.1853 19.7014 5.80027L13.9952 0.281376C13.597 -0.0937901 12.9437 -0.0937901 12.5558 0.281376Z"
fill="#0065B3"/>
</svg>
</button>
</div>
</div>