Text

Компонент використовується для захоплення введеного користувачем тексту. Він використовує v-model, подібний до звичайного введення. Він доступний у різних стилях, кольорах і типах.

Підключення

{{{_vue "vs-form-text"}}}

Component API

Style

Name	Description	Type
size	Розмір інпуту xs, sm, md, lg, xl	String
color	Колір інпуту. Доступні кольори	String
inputType	Тип інпуту. За замовчуванням text. Опції: text, tel, email, address	String
inputStyle	Вигляд інпуту. Доступні варіанти: filled, borderless, outlined	String

State

Name	Description	Type
loading	Анімація індикатора загрузки інпуту	Boolean
readonly	Чи інпут лише для зчитування. За замовчуванням false	Boolean
clearable	Очищення інпуту. За замовчуванням true	Boolean
error	Чи містить поле помилки перевірки?	Boolean
disabled	Переводить компоненту у вимкнений режим	Boolean

Content

Name	Description	Type
autofocus	Автофокус при першому рендері компоненти	String
placeholder	Декоративний текст-підсказка	String
icon	Іконка ліворуч тексту	String
iconRight	Іконка праворуч тексту	String
prefix	Префікс	String
sufix	Суфікс	String
errorMessage	Повідомлення про помилку перевірки (відображається, лише якщо для параметра error встановлено значення true)	String

Events

Name	Description	Return value
@change	Івент зміни значення компоненти	any
@focus	Івент фокусу на компоненті	Event
@blur	Івент виходу з фокуса на компоненті	Event

Приклади

Базове використання (тип інпуту)

Використовуйте типи text, tel, email, address, щоб визначити призначення інпуту.

  <div class="flex flex-col gap-2">
    <VsFormText inputType="text" />
    <VsFormText inputType="tel" />
    <VsFormText inputType="email" />
    <VsFormText inputType="address" />
  </div>
  

Розміри

Окрім розміру за замовчуванням (md), компонента надає додаткові розміри для вибору. Використовуйте розмір атрибута, щоб установити додаткові розміри (xs, sm, md, lg, xl).

  <div class="flex flex-col gap-2">
    <VsFormText size="xs" placeholder="xs" />
    <VsFormText size="sm" placeholder="sm" />
    <VsFormText size="md" placeholder="md" />
    <VsFormText size="lg" placeholder="lg" />
    <VsFormText size="xl" placeholder="xl" />
  </div>
  

Іконки

Використовуйте іконки, щоб додати більше значення інпуту. Ви можете знайти список значків на сайті Tabler.

  <div class="flex flex-col gap-2">
    <VsFormText placeholder="Пошук.." icon="ti ti-search" />
    <VsFormText placeholder="Пошук.." iconRight="ti ti-search" />
   </div>

Зовнішній вигляд

Зовнішній вигляд інпуту. inputStyle : outlined, borderless, filled

  <div class="flex flex-col gap-2">
      <VsFormText inputStyle="outlined" placeholder="outlined"/>
      <VsFormText inputStyle="borderless"  placeholder="borderless"/>
      <VsFormText inputStyle="filled"  placeholder="filled"/>
  </div>
  

Disabled

Пропс disabled використовується для вимкнення введення тексту.

  <div class="flex flex-col gap-2">
      <VsFormText :disabled="true" placeholder="disabled"/>
  </div>
  

Сlearable

Пропс clearable додає іконку, що очищає текст, якщо true.

  <template>
          <VsFormText :clearable="true" placeholder="clearable" v-model="text" />  
      </template>
      <script>
        export default {
          data() {
            return {
              text: "",
            };
          },
        };
      </script>
    

Loading

loading - додає іконку лоадера, якщо true.

  
      <VsFormText :loading="true" placeholder="loading"/>  
    

Error, error message

Пропс error додає червоний бордер до інпуту, а errorMessage виводить повідомлення під ним. Доцільно використувати, щоб сповістити користувача про невірне введення даних/ їх відсутність.

  
      <VsFormText :error="true" placeholder="error" errorMessage="Some error message" />