Grid
Systém Grid je flexibilný spôsob vytvárania responzívnych rozvrhnutí rozdelením obrazovky na mriežku riadkov Rows a stĺpcov Cols. Grid je založený na flexboxe, používa 12 stĺpcov a podporuje 6 breakpointov: xs, sm, md, lg, xl a xxl.
Prehľad funkcií
Responzivita: Grid umožňuje vytvárať responzívne rozvrhnutia (layouty), ktoré sa prispôsobujú rôznym veľkostiam a orientáciám obrazovky.
Nesting : Vývojári môžu vkladať viacero elementov wje-grid do seba a vytvárať tak zložitejšie rozvrhnutia. To umožňuje väčšiu flexibilitu pri usporiadaní obsahu.
Breakpointy: Grid podporuje breakpointy pre telefóny, tablety aj desktop vrátane väčších obrazoviek cez xxl.
Odsadené stĺpce (Offset): Vývojári môžu stĺpce odsadiť a vytvoriť tak vizuálne rozdiely v rozložení. To je užitočné pri vytváraní návrhov s rozloženým alebo asymetrickým usporiadaním.
Automatické rozloženie: Grid poskytuje možnosti automatického prispôsobenia veľkosti stĺpcov na základe obsahu alebo dostupného priestoru. To môže pomôcť optimalizovať rozloženie pre rôzne scenáre.
Predvolené Breakpointy
V tabuľke nižšie nájdete predvolené breakpointy gridu.
Základné použitie
Predvolene majú stĺpce v rámci jedného riadku rovnakú šírku na všetkých zariadeniach.
Veľkosť stĺpcov: auto
Nastavením size na auto sa stĺpec prispôsobuje šírke svojho obsahu a susedné stĺpce automaticky upravia svoju šírku tak, aby vyplnili zostávajúce miesto v riadku.
Špecifická veľkosť stĺpcov
Nastavením size na špecifickú veľkosť stĺpec zaberie určený počet stĺpcov riadku. Susedné stĺpce automaticky upravia svoju šírku tak, aby vyplnili zostávajúce miesto v riadku.
Responzívna veľkosť stĺpcov
Atribút size je možné nastaviť aj špecifickým breakpointom pridaním jeho prefixu. V tomto prípade sa veľkosť stĺpca upraví až po dosiahnutí nastaveného breakpointu.
Offset
Offset umožňuje vytvoriť prázdny priestor v layoute tým, že posunie daný stĺpec doprava. Atribút offset prevezme číselnú hodnotu, ktorá predstavuje počet stĺpcov, o ktoré sa má cieľový stĺpec posunúť.
Responzívny Offset
Pridaním breakpointu do offsetu sa posun stĺpca upraví až po dosiahnutí zvoleného breakpointu.
Order
Poradie stĺpcov je možné upravovať pridaním atribútu order a nastavením jeho hodnoty na pozíciu v mriežke, na ktorú má byť umiestnený.
Responzívne poradie
Ak kombinujete order s breakpointmi alebo rôznymi šírkami stĺpcov, vždy si skontrolujte, či vizuálne poradie stále zodpovedá tomu, čo používateľ očakáva na konkrétnom zariadení.
Zarovnanie
Vertikálne Zarovnanie
Stĺpce je možné zarovnať vertikálne pomocou CSS tried wje-align-items-start, wje-align-items-center, wje-align-items-end.
Horizontálne Zarovnanie
Stĺpce je možné zarovnať horizontálne pomocou CSS tried wje-justify-content-start, wje-justify-content-center, wje-justify-content-end, wje-justify-content-between, wje-justify-content-around.
Kedy použiť
Použite wje-grid, keď potrebujete responzívne rozloženie obsahu v rámci sekcie alebo stránky.
Kedy nepoužiť
Grid nepoužívajte na riešenie biznis logiky ani na orchestráciu stavu. Slúži výhradne na layout.
Prístupnosť
Dbajte na to, aby vizuálne poradie stĺpcov neporušilo logické poradie obsahu pre klávesnicu a čítačky obrazovky.
Odporúčané postupy
- Najprv definujte desktop/mobile breakpoints a až potom dolaďujte detaily.
- Preferujte konzistentné spacing tokeny pred ad-hoc margin/padding hodnotami.
- Pri layoutoch s overflow vždy otestujte klávesnicovú navigáciu a čítačky.
Atribúty a vlastnosti
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Udalosti
Pre tento komponent nie sú dostupné žiadne udalosti.
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS vlastné premenné
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Sloty
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |