Components demo

Komponenty sú postavené na tailwind.

Použitie

Tailwind definuje štýli cez class. Tak je to aj tu. keď dáme komponentu, napríklad linku, class="button", bude sa vyzerať a správať sa ako tlačidlo.
jednotlivé classy je možné kombinovať, to znamené, že napríklad class="button green round" nám vytvorí zelené, guľaté tlačidlo.

farba pozadia a textov: farba pozadia sa definuje cez bg-(farba), farba textov, cez text-(farba).  napr. class="bg-darkBlue text-white" nám vytvorí tmavomodré pozadie s bielim textom. 
podporované farby sú nasledovné: 

primary: '#046AC9',
primaryHover: '#046AC9FF',
darkBlue: '#004483',
darkBlueHover: '#01396e',
lightBlue: '#BCDAF7',
alt: '#046AC9',
font: '#1E1E1E',
fontGray: '#333',
grey: '#CDD0DB',
background:"#E2EEF0",
border: '#CDD0DB',
grey2: '#e6e6e6',
grey3: '#eee',
grey4: '#7f8c8d',
white: '#FFFFFF',
black: '#000000',
warning: '#FF7A04',
success: '#089E17',
danger: '#D70000',
transparent:`transparent`,
inherit:'inherit',

Buttons

tlačidlá sa definujú clasov "button" ďalej máme niekoľko podtried, ktoré definujú ako bude tlačidlo vyzerať a správať sa. Podtriedy je možné ľubovolne kombinovať. 

Zoznam podtried: "secondary", "light" ,"ghost" ,"green", "big", "small", "round"

Align

na zarovnanie som zatiaľ vytvoril nasledovné classy: "center-container", "left-container", "right-container"

Box

Vytvoril som element na zvýraznenie obsahu. ozančuje sa ako "box" a v kombinácii s farbou pozatia a textu je možné dosiahuť požadovaný výsledok:

Full Width

Vytvoril som class "full-width", ktorím sa elementu zadefinuje, že sa má roztiahnuť na celú šírku

Klikni sem