Input
This component is still in work in progress stage in terms of styling. We are open for sugesstions on how can this be customised.
Currently it can be used as a simple component as shown below and comes with very minimal stlying
<template>
<Input type="text" v-model="name" />
</template>
<script>
import {ref} from 'vue'
import {Input} from '@adiranids/vue3-tailwind'
export default {
components: {Input},
setup(){
const name = ref("")
return {
name
}
}
}
</script>
<Input type="text" v-model="name" />
</template>
<script>
import {ref} from 'vue'
import {Input} from '@adiranids/vue3-tailwind'
export default {
components: {Input},
setup(){
const name = ref("")
return {
name
}
}
}
</script>
Like most of the components, you can beautify it by adding some tailwind classes as shown below
<template>
<Input type="text" v-model="name" class="border border-gray-200 p-3 w-2/3 bg-gray-100" placeholder="Enter your name" />
</template>
<script>
import {ref} from 'vue'
import {Input} from '@adiranids/vue3-tailwind'
export default {
components: {Input},
setup(){
const name = ref("")
return {
name
}
}
}
</script>
<Input type="text" v-model="name" class="border border-gray-200 p-3 w-2/3 bg-gray-100" placeholder="Enter your name" />
</template>
<script>
import {ref} from 'vue'
import {Input} from '@adiranids/vue3-tailwind'
export default {
components: {Input},
setup(){
const name = ref("")
return {
name
}
}
}
</script>
Which will produce
Copyright © 2021 Adirani Digital Solutions Ltd