Number
Input Number component allows user to Take Number as a input.
# Playground
#Basic Usage
You can use the Number 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 number input is Both compatible with Vue 3.x and Vue 2.x
#Customise Icons
You can use the Number input with custom icons .You can set the left and right icon through icon-left and icon-right prop respectively.You can also speecify the button color through button-color prop.
You can also use Light Icons from LightVue and pass it into the input.
#Material Effect
You can set the bottom bar to Number input by setting bottom-bar prop to true .
#Value
You can specify the minimum and maximum value that can be entered in input through min and max prop respectively.you can also specify the range by combining both
#Without Button
You can remove left and right buttons from number input by setting controls prop to false.You can still use the other properties on number input.
#Rounded
You can use the rounded variation of lv-number by setting rounded prop to true.
#Input Spinner Buttons
You can show the default input spinner buttons by setting showInputSpinner 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 LvNumber from 'lightvue/number';
// Register the component locally
export default {
components: {
LvNumber
}
}// Register the component globally (Vue 2.x)
Vue.component('LvNumber', LvNumber);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvNumber', LvNumber);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: