Light-input
Light-input provides with a variety of input fields with various available customizations which helps it to fulfil the need of almost every web application/project.
# Playground
#Basic Usage
You can use the input component with some basic and complex use cases like setting placeholder through placeholder prop. There is also a prop called helpText to specify a text that will display below the input. You can also specify a label by using the label prop. LightVue input is Both compatible with Vue 2.x and Vue 3.x
#Icons
You can use the input with icons.You can set the left and right icon through icon-left and icon-right prop respectively.
You can also use Light Icons from LightVue and pass it into the input.
#Material Effect
You can set the bottom bar to input by setting bottom-bar prop to true . You can also set the floating lable by passing label into label prop and setting floating-label prop true
#Floating Label
You can also set the floating lable by passing label into label prop and setting floating-label prop true
#Clearable
You can set the clearable input by setting the clearable prop to true.
#Prepend Append
You can prepend append the content inside the input through prepend append slots.
#Rounded
You can use the rounded variation of LvInput by setting rounded prop to true.
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvInput from 'lightvue/input';
// Register the component locally
export default {
components: {
LvInput
}
}// Register the component globally (Vue 2.x)
Vue.component('LvInput', LvInput);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvInput', LvInput);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: