03 Formulářové prvky

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 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.

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

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

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.

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.

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.

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"

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

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

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.

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

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].