vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add template sample to inputotp

Browse source
This commit is contained in:
Cagatay Civici 2024-02-22 09:40:19 +03:00
parent 067da063a8
commit abfd15d075
3 changed files with 169 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

124
doc/inputotp/TemplateDoc.vue Normal file
View file

@ -0,0 +1,124 @@
<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-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
<\/style>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
<\/style>
`
}
};
}
};
</script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
</style>