VsFormNumber

Компонент Number створений для надання зручного інтерфейсу для введення числових значень. Він складається з поля введення, кнопок «плюс» та «мінус» для легкої корекції значення та необов'язкового відображення повідомлень про помилки. Компонент може бути налаштований для різних розмірів та параметрів стилізації.

Приклад шаблону

hbs

{{{_vue "vs-button"}}}

Component API

Content

Name	Description	Type
value	Поточне числове значення введення	Number, String
errorMessage	Повідомлення про помилку, яке відображається у випадку помилки	String

Behaviour

Name	Description	Return value
min	Мінімально допустиме значення	Number, String
max	Максимально допустиме значення	Number, String
step	Крок зміни числового значення	Number, String

Style

Name	Description	Type
size	Розмір компонента (xs, sm, md, lg, xl)	String

State

Name	Description	Type
disabled	Визначає, чи введення вимкнене	Boolean
error	Наявність помилки у компоненті	Boolean

Events

Name	Description	Return value
@change	Викликається при зміні значення.	Number

Приклади

Базове використання

Нижче наведено базове використання компоненту.

    <template>
    <div>
      {{ number }}
      <VsFormNumber step="0.1" min="-1" max="2" @change="number = $event" />
    </div>
    </template>
    <script>
      export default {
        data() {
          return {
            number: 0,
          };
        },
      };
    </script>
  

Розміри

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