Informačná lišta (Notification banner)
Informačná lišta alebo informačný banner sa používa na zvýraznenie dôležitej informácie, upozornenia, varovania alebo potvrdenia úspešnej operácie. Správa má byť stručná, jasná a výstižná.
Použitie informačnej lišty
Príklad komponentu informačná lišta
Informačná lišta sa používa v situáciách, keď je potrebné informovať používateľa o stave alebo zmene, upozorniť na riziko alebo problém, potvrdiť úspešnú akciu, alebo vyzvať používateľa na jednoduchú následnú akciu.
Text v informačnej lište má byť stručný, zrozumiteľný a konkrétny. Nepoužívajte ju ako náhradu za bežný obsah stránky alebo za chybové hlásenia priamo pri vstupných poliach.
Ako sa používa
- Používa sa na dôležité globálne oznamy, napríklad odstávku systému.
- Používa sa na potvrdenie úspešnej operácie, napríklad odoslanie formulára.
- Používa sa na upozornenie používateľa na riziko alebo zmenu.
- Používa sa na krátku a jasnú správu, ktorá si vyžaduje pozornosť.
Ako sa nepoužíva
- Nepoužíva sa na zobrazenie bežného textu alebo článku.
- Nepoužíva sa ako náhrada za chybové hlásenia pod inputmi formulára.
- Nepoužíva sa ak správa obsahuje príliš veľa textu.
- Ako jediný spôsob rozlíšenia významu iba farbou.
Varianty a stavy
Všetky informačné lišty v ukážkach na tejto stránke sú statické a slúžia iba na demonštráciu vizuálnych variantov komponentu. Z tohto dôvodu používajúrole="region" a sú pomenované viditeľným nadpisom lišty. Ak sa informačná lišta zobrazí dynamicky ako reakcia na akciu používateľa, vhodná rola závisí od významu správy. Viac o použití rolí nájdete v časti Prístupnosť.
1. Informačný typ
Informačný typ má informačnú funkciu a slúži na zvýraznenie všeobecnej alebo doplnkovej informácie.
Príklad komponentu informačná lišta
Pre rýchlejšie vybavenie žiadosti odporúčame priložiť doklad o ukončení štúdia.
2. Varovný typ
Varovný typ má najvyššiu výstražnú funkciu. Používa sa pri kritických informáciách, ktoré môžu používateľovi brániť v dokončení akcie.
Príklad komponentu varovná lišta
Žiadosť nie je možné odoslať, pretože chýbajú povinné údaje. Skontrolujte formulár a doplňte chýbajúce informácie.
3. Upozorňovací typ
Upozorňovací typ vyžaduje zvýšenú pozornosť používateľa. Je vhodný tam, kde informácia môže ovplyvniť výber alebo ďalší postup používateľa.
Príklad komponentu upozorňovacia lišta
Ak prílohy nenahráte v tejto žiadosti, bude potrebné ich doložiť dodatočne elektronicky alebo osobne.
4. Úspešný typ
Úspešný typ informuje o úspešnom dokončení čiastkovej akcie a potvrdzuje správnosť kroku.
Príklad komponentu úspešná lišta
Formulár bol úspešne uložený. Vypĺňanie môžete dokončiť neskôr.
5. Informačná lišta s tlačidlom
Informačná lišta môže využívať aj tlačidlo ktoré umožní používateľovi vykonať požadovanú akciu.
Dôležitá informácia
Služba bude dočasne nedostupná v sobotu od 22:00 do 23:30.
Prístupnosť (Accessibility)
Informačná lišta musí byť zrozumiteľná aj bez spoliehania sa iba na farbu. Ak je oznámenie dynamicky pridané na stránku, musí byť vhodne oznámené asistenčným technológiám podľa významu správy.
Klávesové ovládanie
- Informačná lišta sama o sebe spravidla nevyžaduje focus klávesnice, pokiaľ neobsahuje interaktívny prvok.
Tab– ak lišta obsahuje odkaz alebo tlačidlo na zatvorenie, používateľ sa naň presunie štandardne pomocou klávesnice.EnteraleboMedzerník– aktivuje tlačidlo na zatvorenie, ak je v komponente dostupné.
Základné pravidlá prístupnosti
- Dynamické varovné lišty, ktoré sa zobrazia ako reakcia na akciu používateľa, môžu používať
role="alert". Nepoužívajte všakrole="alert"zároveň s presunom focusu na rovnaký prvok. - Dynamické úspešné alebo informačné lišty môžu používať
role="status", aby bola správa oznámená menej rušivým spôsobom. - Statické lišty v obsahu stránky môžu byť označené ako región pomocou
role="region"a pomenované pomocouaria-labelaleboaria-labelledby, ak je potrebné, aby ich používateľ vedel samostatne lokalizovať. - Dekoratívne ikonky vo vnútri lišty musia byť skryté pred asistenčnými technológiami pomocou
aria-hidden="true". - Význam lišty nesmie byť vyjadrený iba farbou. Text musí jasne komunikovať, či ide o informáciu, upozornenie, chybu alebo úspech.
- Tlačidlo na zatvorenie musí mať zrozumiteľný prístupný názov, napríklad „Zatvoriť informačnú lištu“.
Implementácia informačnej lišty z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia, ak chcete používať makrá.
Možnosti implementácie
1. Statická HTML implementácia
Ak projekt nevyužíva Node.js alebo bundler, môžete použiť kompilované a minifikované súbory zo zložky dist. Pri tomto spôsobe integrácie pracujete s hotovým HTML, CSS a JavaScriptom.
Skopírujte potrebné súbory a assety do projektu. Štruktúra môže vyzerať napríklad takto:
project/
│
├── assets/
│ ├── images/
│ └── fonts/
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikovaný CSS súbor. Na koniec body pripojte JavaScript a inicializujte komponenty.
<!DOCTYPE html>
<html lang="sk">
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu informačná lišta (otvorí sa v novom okne) a vložte ho do svojho HTML.
<div
class="govuk-notification-banner govuk-notification-banner--warning"
role="alert"
aria-labelledby="notification-banner-title"
>
<div class="govuk-notification-banner__header">
<h2
class="govuk-notification-banner__title"
id="notification-banner-title"
>
Upozornenie
</h2>
</div>
<div class="govuk-notification-banner__content">
<p>
Žiadosť nie je možné odoslať, pretože chýbajú povinné údaje.
</p>
</div>
</div>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balík
Pre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru vložte HTML alebo Nunjucks makro podľa spôsobu integrácie.
- Importujte štýly
Pre import individuálneho IDSK komponentu do Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/notification-banner/notification-banner";