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.
Pridaním atribútu standard sa zobrazí textarea v štýle štandardného HTML textarea elementu.
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.
Vlastnosť resize určuje správanie zmeny veľkosti elementu. Ak je nastavená na hodnotu none, veľkosť poľa zostane fixná.
Ak je vlastnosť resize nastavená na hodnotu auto, automaticky sa prispôsobí veľkosť elementu vloženému obsahu.
Pri vloženom atribúte disabled do elementu textarea nebude možné písať.
| Description | Hodnota textarea. |
| Attribute | value |
| Type | string |
| Default | undefined |
| Description | Označuje, či je vstup neplatný. |
| Attribute | invalid |
| Type | boolean |
| Default | undefined |
| Description | Zástupný text v textarea. |
| Attribute | placeholder |
| Type | string |
| Default | undefined |
| Description | Počet riadkov textarea. |
| Attribute | rows |
| Type | number |
| Default | undefined |
| Description | Ak true, v textarea bude zapnutá kontrola pravopisu. |
| Attribute | spellcheck |
| Type | boolean |
| Default | undefined |
| Description | Režim zmeny veľkosti (auto alebo none). |
| Attribute | resize |
| Type | string |
| Default | undefined |
| Description | Ak true, zobrazí sa počítadlo znakov. |
| Attribute | counter |
| Type | boolean |
| Default | undefined |
| Description | Maximálny počet znakov. |
| Attribute | maxLength |
| Type | number |
| Default | undefined |
| Name | Description |
|---|
undefined | Udalosť zmeny (klasický change). |
undefined | Udalosť pri zadávaní znakov (input). |
undefined | Udalosť neplatného vstupu. |
setTextareaHeight
| Description | Nastaví výšku textarea pri automatickej zmene veľkosti. |
| Signature | () => void |
| Description | Aktualizuje počítadlo znakov. |
| Signature | (e: Event) => void |
| Description | Overí validitu vstupu a nastaví chyby. |
| Signature | () => void |
| Description | Propaguje stav validácie a vyvolá udalosť invalid. |
| Signature | () => void |
| Description | Callback pri pripojení k formuláru – napojí odoslanie a validáciu. |
| Signature | (form: HTMLFormElement) => void |
| Description | Callback pri resetovaní formuláru – obnoví predvolenú hodnotu. |
| Signature | () => void |
| Description | Callback pri obnove stavu – obnoví uloženú hodnotu a validitu. |
| Signature | (state: any) => void |
| Description | Callback pri ukladaní stavu – vráti aktuálnu hodnotu. |
| Signature | () => any |
| Name | Description |
|---|
native | Obal natívneho textarea. |
wrapper | Obal vstupného poľa. |
input | Vlastný textarea element. |
| Name | Description |
|---|
--wje-textarea-font-family | Rodina písiem používaná v textarea. |
--wje-textarea-background-color | Pozadie textarea. |
--wje-textarea-color | Farba textu v textarea. |
--wje-textarea-border-width | Šírka rámika textarea. |
--wje-textarea-border-style | Štýl rámika textarea. |
--wje-textarea-border-color | Farba rámika textarea. |
--wje-textarea-border-color-focus | Farba rámika pri focus. |
--wje-textarea-border-radius | Polomer zaoblenia rohov textarea. |
--wje-textarea-color-invalid | Farba textu pri neplatnom vstupe. |
--wje-textarea-margin-bottom | Odsadenie spodnej časti textarea. |
--wje-textarea-padding | Vnútorný odsadzovací priestor textarea. |
--wje-textarea-line-height | Výška riadku textu. |
| Name | Description |
|---|
| `` | Predvolený slot pre obsah (text). |
start | Slot pre prvý slotted element (napr. ikona vľavo). |
end | Slot pre druhý slotted element (napr. ikona vpravo). |