40 lines
1.3 KiB
Vue
40 lines
1.3 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
|
|
</DocSectionText>
|
|
<div class="card flex justify-center">
|
|
<InputOtp v-model="value">
|
|
<template #default="{ attrs, events }">
|
|
<input type="text" v-bind="attrs" v-on="events" class="w-12 text-3xl border-x-0 border-y-0 text-center bg-transparent border-b-2 border-surface-300 dark:border-surface-700 focus:border-primary outline-none" />
|
|
</template>
|
|
</InputOtp>
|
|
</div>
|
|
<DocSectionCode :code="code" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import InputOtp from '@/volt/inputotp';
|
|
import { ref } from 'vue';
|
|
|
|
const value = ref(null);
|
|
|
|
const code = ref(`
|
|
<template>
|
|
<div class="card flex justify-center">
|
|
<InputOtp v-model="value">
|
|
<template #default="{ attrs, events }">
|
|
<input type="text" v-bind="attrs" v-on="events" class="w-12 text-3xl border-x-0 border-y-0 text-center bg-transparent border-b-2 border-surface-300 dark:border-surface-700 focus:border-primary outline-none" />
|
|
</template>
|
|
</InputOtp>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import InputOtp from '@/volt/inputotp';
|
|
import { ref } from 'vue';
|
|
|
|
const value = ref(null);
|
|
<\/script>
|
|
`);
|
|
</script>
|