UtilsTextArea

Данный компонент выводит многострочное текстовое поле.

Компонент может быть использован несколькими способами:

1. Можно использовать в форме с помощью formData. Для этого в компоненте предусмотрен пропс id
2. Можно использовать через v-model.

Пропсы

• id — идентификатор поля ввода. Устанавливает id и name, которые используются в formData.

• label — плейсхолдер для поля. Задает параметр placeholder.

• placeholder — плейсхолдер для поля. Задает параметр placeholder.

• disabled — является ли поле выключенным. Задает параметр disabled.

• required — является ли поле обязательным для заполнения. Выставляет атрибут required.

  По умолчанию: true.

• rows — тип поля.

  По умолчанию: 3.

Стилизация

Для стилизации компонента подготовлены классы:

• utils-textarea-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-textarea-label. Его стилизация влияет на label.
• utils-textarea-textarea. Его стилизация влияет на textarea.

При этом label и textarea можно стилизовать просто используя их селекторы.

INFO

Также для стилизации можно использовать глобальные классы, которые стилизуют все компоненты формы.

• utils-form-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-form-label. Его стилизация влияет на label.
• utils-form-input. Его стилизация влияет на поле ввода.

Использование

<script setup lang="ts">
const text = ref("")
</script>

<template>
  <UtilsTextArea
    v-model="text"
    id="test-field"
    :rows="5"
  />
</template>