Toggle Switch
ToggleSwitch is used to select a boolean value i.e. it allows you to select or deselect an attribute.
#Basic Usage
Use the LvToggleSwitch with some basic and complex use cases by passing either classes or props eg. for setting label you can pass a string into label prop. LightVue toggle-switch is Both compatible with Vue 2.x and Vue 3.x
#With Icons
You can set the icon on the LvToggleSwitch by passing a icon string into icon prop.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.
#Dense Switch
You can use the dense version of LvToggleSwitch by setting dense prop true.you can also use set the icon to dense toggle switch by passing the icon in icon prop
#Predefining state
You can Predefine the state of LvToggleSwitch by setting modal-value true.by default the value if false
#Label Position
You can change the label position by through labelPosition prop
#Disable
You can also disable the LvToggleSwitch by setting the disabled prop true
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvToggleSwitch from 'lightvue/toggle-switch';
// Register the component locally
export default {
components: {
LvToggleSwitch
}
}// Register the component globally (Vue 2.x)
Vue.component('LvToggleSwitch', LvToggleSwitch);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvToggleSwitch', LvToggleSwitch);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: