Textarea

scoped

Textarea rozširuje možnosti štandardného HTML textarea elementu. Pridáva štýly pre dosiahnutie vizuálne konzistentného používateľského rozhrania a ponúka funkcie ako napríklad auto-height - prispôsobenie výšky elementu vloženému textu, alebo tiež počítadlo vložených znakov.

Základné použitie

Ukážka zobrazuje textarea v jej predvolenom stave bez počítadla, automatickej výšky alebo ďalších úprav.

Standard

Pridaním atribútu standard sa zobrazí textarea v štýle štandardného HTML textarea elementu.

Counter

Pridaním atribútu counter sa pod textareou zobrazí počítadlo zobrazujúce počet vložených znakov a ich maximálny povolený počet. Je potrebné použitie v kombinácii s vlastnosťou max-length. V opačnom prípade bude maximálny povolený počet nastavený na 1000.

Resize (none)

Vlastnosť resize určuje správanie zmeny veľkosti elementu. Ak je nastavená na hodnotu none, veľkosť poľa zostane fixná.

Resize (auto)

Ak je vlastnosť resize nastavená na hodnotu auto, automaticky sa prispôsobí veľkosť elementu vloženému obsahu.

Disabled

Pri vloženom atribúte disabled do elementu textarea nebude možné písať.

Kedy použiť

Použite wje-textarea, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	-

invalid

Popis	Riadi validáciu alebo stavové hlášky pre voľbu invalid.
Atribút	invalid
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string
Predvolené	false

name

Popis	Nastavuje názov poľa pri odoslaní formulára.
Atribút	name
Typ	any
Predvolené	-

placeholder

Popis	Nastavuje zástupný text pri prázdnej hodnote.
Atribút	placeholder
Typ	any
Predvolené	-

readonly

Popis	Zabráni používateľovi upravovať hodnotu.
Atribút	readonly
Typ	boolean
Predvolené	-

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
Typ	boolean
Predvolené	-

rows

Popis	Nastavuje počet viditeľných riadkov textu.
Atribút	rows
Typ	any
Predvolené	-

validateOnChange

Popis	Určuje, či je voľba validate-on-change zapnutá a ovplyvňuje správanie komponentu.
Atribút	validate-on-change
Typ	boolean
Predvolené	false

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	-

Udalosti

Názov	Popis
wje-textarea:change	Vyvolá sa pri zmene hodnoty komponentu.
wje-textarea:input	Vyvolá sa pri zmene vstupnej hodnoty.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
input	Štýluje shadow časť input.
wrapper	Štýluje obalovú shadow časť.

CSS vlastné premenné

Názov	Popis
--wje-textarea-font-family	Vlastná CSS premenná, ktorá riadi typografiu.
--wje-textarea-background-color	Vlastná CSS premenná, ktorá riadi background color.
--wje-textarea-color	Vlastná CSS premenná, ktorá riadi color.
--wje-textarea-color-invalid	Vlastná CSS premenná, ktorá riadi color invalid.
--wje-textarea-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-textarea-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-textarea-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-textarea-border-color-focus	Vlastná CSS premenná, ktorá riadi border color focus.
--wje-textarea-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-textarea-margin-bottom	Vlastná CSS premenná, ktorá riadi margin bottom.
--wje-textarea-line-height	Vlastná CSS premenná, ktorá riadi výšku riadku.
--wje-textarea-padding	Vlastná CSS premenná, ktorá riadi padding.

Sloty

Pre tento komponent nie sú dostupné žiadne sloty.