Formulář FS

Master page pro globální tlačítka

Nová globální textová pole a selecty nyní obsahují dle domluvy pouze obalovací div, label, input a span s chybovou hláškou
Selecty a multiselecty přepoužíváme z knihovny Multiple Select. Více informací a variací je k nalezení zde.
Checkboxy a Radio buttony obsahují div navíc, který obaluje jednotlivé inputy, abychom je mohli lépe stylovat
Efekty checkboxů a radio buttonů jsou vytvořeny pomocí css pseudo class
Jednotlivé stavy řešíme pomocí class na první úrovni (obalovací div)
- custom-input--error = chybový stav
- custom-input--radio = design pro checkboxy a radio
- custom-input--horizontal = horizontální uspořádnání (label vedle tlačítek)
Tlačítka lze různě modifikovat pomocí data atributů viz níže.

Atribut	Hodnoty	Default	Detail
data-label-weight	normal \| bold	normal	Zajišťuje tloušťku hlavního labelu inputu
data-label	true \| false	true	Kontroluje zobrazování / skrývání hlavního labelu
data-tooltip	true \| false	true	Zajišťuje zobrazování / skrývání tooltipu v labelu
data-label-width	auto \| fixed	auto	Šířka labelu - fixní vs volná
data-label-visibility	visible \| hidden	visible	Viditelnost labelu
data-height	normal \| bigger \| biggest	normal	Nastavuje výšku inputu, zvětšuje se také placeholder či label

Textové pole - vertikální

Pozor chyba! Label

Pozor chyba! Label + tooltip

Pozor chyba! Bold label + tooltip

Pozor chyba! Disabled

Pozor chyba! Label

Textové pole - horizontální

Pozor chyba! Label

Pozor chyba! Dlouhýýýýýýý popisek

Pozor chyba! Label

Select boxy - horizontální

Pozor chyba! Single select bez filtru

Pozor chyba! Single select s opt groupami

Pozor chyba! Multiple select bez filtru

Pozor chyba! Single select s tooltipem a filtrem

Pozor chyba! Multiple select s tooltipem a filtrem

Pozor chyba! Single select disabled

Pozor chyba! Multi select disabled

Pozor chyba! Single select s chybou

Pozor chyba! Multi select s chybou

Pozor chyba! Single Select s chybou

Pozor chyba! Multi Select s chybou

Pozor chyba! Větší single select

Pozor chyba! Group select (výběr na skupiny)

Pozor chyba! Group select + filter

Select boxy - vertikální

Pozor chyba! Label s auto šířkou

Pozor chyba! Multiple s auto šířkou

Pozor chyba! Label s fixní šířkou

Pozor chyba! Label s fixní šířkou a tooltipem

Pozor chyba! Větší vertikální selectbox

Pozor chyba! Největší vertikální selectbox

Pozor chyba! Label s fixní šířkou

Pozor chyba! Multi Select horizontální

Pozor chyba! Disabled fixed label

Pozor chyba! Short

Select boxy jsou přepoužívány z knihovny Multiple Select. Více informací a variací je k nalezení zde.

Pozor chyba! Selectbox s vlastní ikonou

Upload fields

Pozor chyba! Vyberte soubor

Checkboxy

Radio buttons

Pozor chyba! Horizontální radio buttons s tooltipem

REACT

Disabled

Více ukázek není potřeba jelikož radio tlačítka fungují identicky jako Checkboxy

Datepickers

Pozor chyba! Horizontální datepicker s tooltipem

Pozor chyba! Horizontální datepicker s chybou

Pozor chyba! Horizontální datepicker s ikonou

Pozor chyba! Vertikální datepicker s ikonou

Input s našeptávačem (Awesomeplete)

Pozor chyba! Pomocí atributu data-list

Pozor chyba! Pomocí tagu datalist

Pozor chyba! Pomocí JS a externího souboru

@@include('./partials/awesomplete-datalist.html')

Pozor chyba! Pomocí JS a pole stringů

Našeptávače jsou přepoužívány z knihovny Awesomplete. Více informací a modifikací je k nalezení zde.