scoped
Textarea extends the capabilities of the standard HTML textarea element. It adds styles to achieve a visually consistent user interface and offers features such as auto-height - adjusting the height of an element to the inserted text, or also a counter for inserted characters.
Adding the standard attribute will display a textarea in the style of the standard HTML textarea element.
Adding the counter attribute will display a counter below the textarea showing the number of characters inserted and the maximum number of characters allowed. It is to be used in combination with the max-length property. Otherwise, the maximum number allowed will be set to 1000.
The resize property specifies the behavior of element resizing. If set to none, the field size remains fixed.
If the resize property is set to auto, the size of the element is automatically adjusted to the inserted content.
When the disabled attribute is inserted into the textarea element, it will not be possible to write.
| 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). |