Komponenty

Nadpis, ktorý po kliknutí odkryje obsah. Stojí na natívnom <details>, takže nepotrebuje ani riadok JavaScriptu.

.itl-accordion · 6 ukážok

Hláška cez celú šírku obsahu — výsledok akcie, varovanie, chyba formulára. Voliteľne zatvárateľná.

.itl-alert · 7 ukážok

Pole s našepkávačom — používateľ píše, komponent filtruje zoznam a on si vyberie. Bez externej knižnice.

.itl-autocomplete · 6 ukážok

Iniciály v kruhu, prípadne fotografia. Farbu určuje meno, nie náhoda — ten istý človek má vždy ten istý odtieň.

.itl-avatar · 8 ukážok

Krátke označenie stavu alebo kategórie. Tlmené aj sýte prevedenie, počet, súhrnný štítok, zatvárateľný filter.

.itl-badge · 10 ukážok

Cesta k aktuálnej stránke nad jej nadpisom. Ukáže, kde používateľ je a ako sa vráti späť.

.itl-breadcrumb · 6 ukážok

Akcia, ktorú používateľ spustí kliknutím. Deväť variantov, tri veľkosti.

.itl-button · 10 ukážok

Ohraničený blok obsahu s hlavičkou, telom a pätičkou. Základná stavebná jednotka obrazoviek.

.itl-card · 12 ukážok

Stĺpcový, čiarový a prstencový graf s našimi farbami, písmom a slovenskými číslami. Dáta sú v značkách.

.itl-chart · 5 ukážok

Checkbox, radio a prepínač s klikateľným popiskom, skupinou volieb vo fieldsete a voľbou ako dlaždicou.

.itl-checkbox · 14 ukážok

Dvojice „popis — hodnota" v karte detailu. Sémanticky zoznam definícií, nie tabuľka.

.itl-data-list · 6 ukážok

Výber riadkov a hromadné akcie nad komponentom tabuľka. Triedenie a filtrovanie zostávajú serverové.

.itl-data-table · 2 ukážok

Kalendár nad poľom formulára — slovenský formát, pondelok ako prvý deň, rozsah aj čas. Tenký wrapper nad Flatpickrom.

.itl-datepicker · 5 ukážok

Tlačidlo a panel pod ním — navigácia, používateľské menu, akcie v riadku tabuľky, viacstĺpcové menu sekcie.

.itl-dropdown · 7 ukážok

To, čo používateľ vidí namiesto obsahu — ikona, veta o tom čo chýba, a akcia, ktorá s tým niečo urobí. Slúži aj ako celá chybová obrazovka.

.itl-empty-state · 6 ukážok

Riadok „ikona + text" — čo systém vie, čo obsahuje balík, čo treba pripraviť. Ikona nahrádza odrážku.

.itl-feature-list · 4 ukážok

Sedem vzorov na rozmiestnenie prvkov — mriežka, stoh, zhluk, dva stĺpce, strop šírky a dve kostry stránky. Jediné miesto v systéme, ktoré rieši medzery.

.itl-grid · 8 ukážok

Phosphor ako CSS maska — jedna trieda na ikonu. Veľkosť riadi rodič, farbu dedí, takže ikona nikdy nepotrebuje vlastný modifikátor.

.itl-i-* · 6 ukážok

Pole spojené s tlačidlom, selectom, statickým textom alebo checkboxom do jedného celku so zdieľaným rámom.

.itl-input-group · 9 ukážok

Textové pole, viacriadkové pole a select spolu s popiskom, nápovedou a chybovou hláškou.

.itl-input · 14 ukážok

Natívny dialóg nad obsahom — potvrdenie nevratnej akcie, krátky formulár, náhľad dokladu. Štyri šírky, kontextové farby hlavičky, statické a rozmazané prevedenie.

.itl-modal · 9 ukážok

Lišta pri vrchu obrazovky — značka, hlavné menu, hľadanie a používateľské menu. Pod md sa menu vysunie zboku.

.itl-navbar · 2 ukážok

Nadpis obrazovky, stav vedľa neho, podnadpis a akcie vpravo. Prvý riadok každej stránky.

.itl-page-header · 7 ukážok

Lišta pod tabuľkou — koľko záznamov je vidieť, prepínanie strán a voľba veľkosti strany.

.itl-pagination · 6 ukážok

Pruh alebo kruh s hodnotou — obsadenosť termínu, postup nahrávania, odpočet času. Hodnota ide CSS premennou, nie inline šírkou.

.itl-progress · 7 ukážok

Zvislá navigácia so sekciami a ikonami. Dá sa zbaliť na ikony, pod md sa vysúva zboku.

.itl-sidebar · 3 ukážok

Sivé tvary na mieste obsahu, ktorý sa ešte načítal. Ukazujú, čo má prísť, takže stránka pri dopočítaní nepodskočí.

.itl-skeleton · 6 ukážok

Točenie pre čakanie, o ktorom nevieme, ako dlho potrvá. Farbu dedí, takže na tlačidle je biely a v texte tmavý.

.itl-spinner · 5 ukážok

Jedno číslo, ktoré má človek prehliadnuť na jeden pohľad — s popisom, jednotkou a zmenou oproti minulému obdobiu.

.itl-stat-card · 5 ukážok

Ukazovateľ krokov viackrokového formulára — čo je za mnou, kde stojím, čo ma čaká. Číslo kreslí CSS, nie značky.

.itl-stepper · 4 ukážok

Zoznam záznamov s hlavičkou, triedením, filtračným riadkom a farebnými stavmi riadkov.

.itl-table · 11 ukážok

Prepínanie medzi rovnocennými časťami jednej obrazovky. Ovládanie šípkami, stav v ARIA.

.itl-tabs · 5 ukážok

Prepnutie svetlej a tmavej témy atribútom na koreni dokumentu. Komponenty o téme nevedia — prefarbí ich sémantická vrstva.

[data-itl-theme] · 4 ukážok

História zmien dokladu — kto čo kedy urobil. Značka nesie tón, text zostáva čierny.

.itl-timeline · 4 ukážok

Krátke potvrdenie pri okraji obrazovky, ktoré samo zmizne a neprerušuje prácu.

.itl-toast · 6 ukážok

Krátke vysvetlenie pri prvku, ktoré sa ukáže pri prejdení myšou alebo pri fokuse. Nesie doplnok, nikdy nie to podstatné.

.itl-tooltip · 5 ukážok

Zóna na pretiahnutie súborov a zoznam príloh s postupom. Prenos na server si robí cieľový projekt sám.

.itl-upload · 4 ukážok

/assets/fonts/embed.md

Pokyny pre AI agentov aj ľudí pracujúcich v tomto repozitári.

/CLAUDE.md

Zápis toho, čo je za nami: hotová práca, postavené komponenty, zapísané rozhodnutia a uzavreté otázky. Čo je ešte pred nami, je v TODO.md.

/HISTORY.md

Interná knižnica UI komponentov firmy IT LEARNING SLOVAKIA, s.r.o.

/README.md

Interná knižnica UI komponentov firmy IT LEARNING SLOVAKIA, s.r.o. 39 hotových komponentov, tmavý režim, plná ARIA. Zdroj a galéria: https://design.itl.sk

/skills/itl-design/SKILL.md

Čo je ešte pred nami. Hotová práca, postavené komponenty, zapísané rozhodnutia a uzavreté otázky sú v HISTORY.md.

/TODO.md

Generovaný adresár. Needituj ho ručne — obnovíš ho príkazom:

/vendor/README.md