ZvInputCode
ZvInputCode is a standalone component for helping user to enter a validation code - This component supports the dark mode
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
model:
vue
<template>
<ZvInputCode v-model="codeValue" />
</template>
<script lang="ts" setup>
import ZvInputCode from '@zadigetvoltaire/ui/components/ZvInputCode'
import { ref } from 'vue'
const codeValue = ref()
</script>Accept Alpha Charac
model: a1b2
vue
<template>
<ZvInputCode v-model="codeAlphaValue" accept-alpha />
</template>
<script lang="ts" setup>
import ZvInputCode from '@zadigetvoltaire/ui/components/ZvInputCode'
import { ref } from 'vue'
const codeAlphaValue = ref('a1b2')
</script>Sizing
This component uses the em unit, so it inherits the font size applied by the parent.
html
<ZvInputCode class="text-xxs" />
<ZvInputCode class="text-xs" />
<ZvInputCode class="text-sm" />
<ZvInputCode class="text-md" />
<ZvInputCode class="text-lg" />
<ZvInputCode class="text-xl" />So, you can manage the size of the component with the tailwind responsive prefixes instead of using javascript
html
<ZvInputCode class="text-xs lg:text-base xl:text-lg" />But 3 sizes are predefined: small, medium, large (not applied by default)
This prop apply the tailwind classes like that:
- small = text-xs
- medium = text-base
- large = text-xl
html
<ZvInputCode size="small" />
<ZvInputCode size="medium" />
<ZvInputCode size="large" />Type number
When you set the prop type to number, the component will returns a number by the model
v-model / codeNumber: 1234 - type = number
vue
<template>
<ZvInputCode v-model="codeNumber" type="number" />
**v-model / codeNumber**: {{ codeNumber }} - type = {{ typeof codeNumber }}
</template>
<script lang="ts" setup>
import ZvInputCode from '@zadigetvoltaire/ui/components/ZvInputCode'
import { ref } from 'vue'
const codeNumber = ref(1234)
</script>Required
Try to sumbit the form
html
<form>
<ZvInputCode required />
<ZvButton type="submit"> Submit </ZvButton>
</form>Disabled
html
<ZvInputCode disabled />