Textarea
Textarea component allows user to write long text/ paragraphs.
# Playground
#Basic
You can use the LvTextarea with some basic and complex use cases by passing either classes or props eg. If you want to set the placeholder you can pass it to placeholder, You can also set the number of visible rows through rows prop, You can set the Label by passing a string into label prop. LightVue textarea is Both compatible with Vue 2.x and Vue 3.x
#Character Count
You can also specify the max-character count to the LvTextArea by passing a number max-length prop,You can also set the visible character count at the bottom-right by setting show-limit prop true
#Auto resize
You can define the behaviour of LvTextarea after characters exceed text area height either it will scroll or get resize the scrollable behaviour is default but if you want to auto resize the text area ,You have to set autoResize prop true
#Vertical Resize
You can define the behaviour of LvTextarea after characters exceed text area height either it will scroll or get resize the scrollable behaviour is default but if you want to auto resize the text area vertically ,You have to set resize prop to vertical
#Material design
You can set the animated bottom bar to the Lvtextarea by setting bottomBar prop true
#Floating Label
You can set the label as a floating label by setting the floatingLabel
#Rounded
You can use the rounded variation of LvTextarea by setting rounded prop true.
#Custom Icons
You can add left and right icons to the LvTextarea component using the icon-left and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the textarea.
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LVTextarea from 'lightvue/textarea';
// Register the component locally
export default {
components: {
LVTextarea
}
}// Register the component globally (Vue 2.x)
Vue.component('LVTextarea', LVTextarea);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LVTextarea', LVTextarea);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: