InputNumber

Input Number

Input Demo

Number

Min 0 Max 180

Vector2

x

y

Vector3

x

y

z

Custom Label

<script lang="ts" setup>
import { ref } from 'vue'
import type { Vector2, Vector3 } from '@advjs/gui'

const num = ref(6)

const vector2 = ref<Vector2>({
  x: 0,
  y: 0,
})

const vector3 = ref<Vector3>({
  x: 0,
  y: 0,
  z: 0,
})
</script>

<template>
  <AGUIDemoBlock title="Input Demo">
    <AGUIForm>
      <AGUIFormItem label="Number">
        <AGUIInputNumber v-model="num" />
      </AGUIFormItem>

      <AGUIFormItem label="Min 0 Max 180">
        <AGUIInputNumber v-model="num" :min="0" :max="180" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector2">
        <AGUIInputVector v-model="vector2" />
      </AGUIFormItem>

      <AGUIFormItem label="Vector3">
        <AGUIInputVector v-model="vector3" />
      </AGUIFormItem>

      <AGUIFormItem label="Custom Label">
        <AGUIInputVector />
        <AGUIInputVector />
      </AGUIFormItem>
    </AGUIForm>
  </AGUIDemoBlock>
</template>

NumberField (Drag)

NumberField

TOP

MIDDLE

BOTTOM

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(123)
</script>

<template>
  <AGUIDemoBlock title="NumberField">
    <AGUIProperty label="TOP">
      <AGUINumberField v-model="value" location="TOP" />
    </AGUIProperty>

    <AGUIProperty label="MIDDLE">
      <AGUINumberField v-model="value" location="MIDDLE" />
    </AGUIProperty>

    <AGUIProperty label="BOTTOM">
      <AGUINumberField v-model="value" location="BOTTOM" />
    </AGUIProperty>
  </AGUIDemoBlock>
</template>