Проверка текстовых полей

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

Компонент v-text-field

Мы создаем текстовые поля в Vuetify с компонентом v-text-field:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"><v-text-field label="Regular"></v-text-field></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Vuetify заполнители текстовых полей

Мы можем указать ожидаемое значение для текстового поля с помощью реквизита placeholder:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Regular" placeholder="Placeholder"></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Настройка цветов текстового поля в Vuetify

Мы можем настроить цвет текстовых полей, установив свойство color на цвет в палитре Material Design:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field
          label="Username"
          color="green"
        ></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Получите бесплатную копию здесь

Вариант заполнения текстового поля Vuetify

Мы можем использовать заполненный вариант текстового поля с реквизитом filled:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Filled" filled></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Текстовое поле Vuetify с выделенным вариантом

Установка реквизита outlined на true в компоненте текстового поля будет использовать его обрисованный в общих чертах вариант:

<template>
  <v-app>
    <v-row justify="center" class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Outlined" outlined></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Vuetify фигурные текстовые поля

Текстовые поля с реквизитом shaped имеют увеличенный радиус границы для двух верхних углов:

<template>
  <v-app>
    <v-row class="ma-2">
      <v-col cols="6"
        ><v-text-field label="First Name" filled shaped></v-text-field
      ></v-col>
      <v-col cols="6"
        ><v-text-field label="Last Name" outlined shaped></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Отключение текстовых полей в Vuetify

Мы можем запретить текстовому полю принимать любой ввод, установив свойство disabled на true.

<template>
  <v-app>
    <v-row class="ma-2">
      <v-col cols="4"
        ><v-text-field label="Address" disabled></v-text-field
      ></v-col>
      <v-col cols="4"
        ><v-text-field label="Address" filled disabled></v-text-field
      ></v-col>
      <v-col cols="4"
        ><v-text-field label="Address" outlined disabled></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Текстовые поля только для чтения

Мы также можем предотвратить ввод текстового поля с помощью реквизита readonly:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field label="Regular" value="Regular" readonly></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Текстовые поля Vuetify Solo

Мы можем стилизовать текстовые поля альтернативным соло-дизайном с реквизитом solo:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field
          label="Solo"
          solo
        ></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Vuetify Однострочные текстовые поля

Чтобы метки текстовых полей не плавали при фокусировке, мы можем использовать свойство single-line:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-col cols="4"
        ><v-text-field label="Single-line" single-line></v-text-field
      ></v-col>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Заключение

Vuetify предоставляет компонент v-text-field для создания текстовых полей, которые полезны для ввода текста пользователями.

Еженедельно получайте советы и руководства по Vuetify, Vue, JavaScript и другим ресурсам:http://eepurl.com/hRfyJL

Обновлено на: codingbeautydev.com.