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!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!

Textové pole - horizontální

Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!

Select boxy - horizontální

Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!

Select boxy - vertikální

Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!

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

Pozor chyba!

Upload fields

Pozor chyba!
calendar-icon
Pozor chyba!
calendar-icon

Checkboxy

Pozor chyba!
Pozor chyba!
Pozor chyba!

Pozor chyba!

Checkboxy bez labelu

Pozor chyba!

Pozor chyba!
Pozor chyba!

Pozor chyba!

Radio buttons

Pozor chyba!

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

Datepickers

Pozor chyba!
Pozor chyba!
Pozor chyba!
Pozor chyba!
calendar-icon
Pozor chyba!
calendar-icon

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

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

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