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.

Velikot buňek se řídí standardními třídami .size--[xs|s|m|l]--X-12, pro speciální případ, kdy se má nějakým prvkem vyplnit celý zbývající prostor je možno použít třídu .size--max.

Je možné také použít třídy .top a .bottom pro ovlivnění vertikálního zarovnání prvků.

S třídou .form-inline--force se prvky zobrazí vedle sebe i v mobilní verzi, kde se jinak už řadí pod sebe.

Přihlásit se

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

Tmavé pozadí

Na oblaující prvek je potřeba umístit třídu .white.



Popis nesprávně vyplněného pole


Popis pole


Popis pole

Řá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

Tlačítka externího přihlášení – tmavá

Pro formuláře s přihlášením přes externí služby. Tlačíka se obalí .btn-wrap.btn-wrap--samewidth. Každé pak na .btn musí mít modifikátor .btn-extlogin.

Tlačítko pro přihlášení přes MUNI má ikonu .btn--extlogin__icon.btn--extlogin__icon--muni.font-muni bez obsahu.

Ostatní tlačítka mají ikonu .btn--extlogin__icon.btn--extlogin__icon--other, obsahem pak samotná ikona. Může být vlastní obrázek nebo ikona ze sady.

Tlačítka externího přihlášení – světlá

Oproti předchozí variantě modifikátor .btn-border na tlačítka.

Indikace stavu odeslání formuláře v tlačítku

Tlačítko musí mít třídu .btn--with-state a dále potomka span.btn__state, který obsahuje samotný element s indikací stavu. Při načítání se jedná o span.loading-indicator, pro ostatní stavy je možné použít span.icon.icon-[název].

Přepnout stav

Mám zájem Mám zájem Mám zájem

Mám zájem Mám zájem Mám zájem

Mám zájem Mám zájem Mám zájem

Mám zájem Mám zájem Mám zájem