03 Formulářové prvky

Zdrojové CSS:
/src/css/atoms/forms/_input.scss,
/src/css/atoms/forms/_select.scss
a /src/css/atoms/_message.scss

Zdrojové JS:
/src/js/components/selectize.coffee

Textové inputy

Pro různé typy inputů používejte různé type atributy (např. type="email" pro emailový input apod.). Jeden z důvodů proč: na touch zařízeních se pak zobrazí správná klávesnice a usnadníte tím použitelnost vašich stránek.

Každý input má svůj holder inp-fix, kvůli pozdějšímu použití ikonek, pozicování buttonů apod. Každý input / textarea má classu inp-text, od které se vše styluje.

Pro zvýraznění povinného políčka slouží span require, který se umísťuje do elementu label a má dvě možnosti použití viz. příklad.











Inputy inline na řádku

Inputy na řádku je možné skládat do klasického gridu nebo využít následující konstrukce.

Inputy inline na řádku s mezerami

Stejná jako atom Inputy inline na řádku. Pouze se na element .form-inline přidá modifikátor .form-inline--spaced

Přihlásit

Velký inline select s tlačítkem

Stejná jako atom Inputy inline na řádku. Pouze s jinými variantami obsahu.

Odeslat

Inputy s ikonkami

Atom po zobrazení ikonky na začátku inputu nebo na konci inputu. Pro zobrazení je potřeba přidat modifikátor .inp-icon na element .inp-fix spolu s modifikátorem inp-icon--before / inp-icon--after, podle toho kde chceme aby se ikonka zobrazila. Lze vložit jakýkoliv atom ikonky.

Ikonka může být také buttonem, který bude odesílat formulář. Také ji lze obarvit pomocí class z SK mini frameworku.





Inputy se stavy a nápověda k inputu

Nápověda či doplňující info k inputu se vkládá do elementu .inp-fix jako span.inp-info, který může mít ikonku dle pořeby.

Stavy se určují pomocí class .error, .warning, .success na obalující elementu p. Modifikátor způsobí přebarvení doplňujícího info inputu a případně borderu inputu.


Nápověda k inputu


Nápověda k inputu s ikonkou


Popis nesprávně vyplněného pole


Popis nesprávně vyplněného pole


Popis pole


Popis pole


Popis pole


Popis pole

Našeptávač a selecty

Základní select bez použití JS se styluje classou .inp-select s obalem .inp-fix a modifikátorem .inp-fix--select.

K možnosti customizace vzhledu selectu a našeptávač pro standardní input se využívá plugin http://selectize.github.io/selectize.js/. JS se naváže classou js-select na selectu / inputu (pro našeptávač)

Pro našeptávač je potřeba nastavit atribut data-suggest dle příkladu. Více v dokumentaci pluginu výše.






Checkboxy & radia

Důležitá je struktura label.inp-item > input + span, která díky css3 selektorům dokáže přestylovat checkbox/radio pomocí pseudoelementu :before a :after. Pro .inp-item se používají modifikátory inp-item--checkbox pro checkbox a inp-item--radio pro radio.

Radia a checkboxy se mohou použí v různých souvislosech. Samostatně v elementu p. V elementu .inp--items jako výpis ul.inp-items__list > li nebo inlinově s modifikátorem inp-items--inline na elementu .inp-items.

Error stav se řeší stejně jako u klasických inputů, tedy vložením class error na obalující element. Pokud chceme zvýraznit celý výpis, pak error classu nevložíme na obalující li, ale na ul.

Disabled stav inputu se řeší pomocí atributu disabled="disabled". Checked stav se řeší pomocí atributu checked="checked"

Blokové checkboxy

Inlinové checkboxy

Error inline checkboxy (povinné)

Blokové radia

Řádkové radia

Všeobecná oznámení

Standardní atom pro hlášky je .message, který je dále modifikován dle potřeby zvýraznění:
message--error - červená
message--warning - oranžová
message--info - modrá
message--success - zelená

Ikonka lze použít kterákoliv z atomů ikonek.

Pokud nechcete možnost zavření hlášky, pak stačí odstranit .message__close

Zavřít

Chyba

Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

Zavřít

Výstraha

Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

Zavřít

Informace

Popis mollis laoreet nisl id tincidunt. Pellentesque mollis

Zavřít

OK

Popis mollis laoreet nisl id tincidunt. Pellentesque mollis