Toggle
<script>
export default {
data() {
return {
toggled: false
};
}
};
</script>
<template>
<IToggle v-model="toggled">I accept the terms and conditions</IToggle>
</template>
You can set the toggle input to be readonly by using the readonly property.
<script>
export default {
data() {
return {
toggled: true
};
}
};
</script>
<template>
<IToggle v-model="toggled" readonly>I accept the terms and conditions</IToggle>
</template>
You can set the toggle input to be disabled by using the disabled property.
<script>
export default {
data() {
return {
toggled: false
};
}
};
</script>
<template>
<IToggle v-model="toggled" disabled>I accept the terms and conditions</IToggle>
</template>
You can use the color property to set a light or dark color for your toggle components.
<script>
export default {
data() {
return {
toggled: false
};
}
};
</script>
<template>
<IToggle v-model="toggled" color="light">I accept the terms and conditions</IToggle>
<IToggle v-model="toggled" color="dark">I accept the terms and conditions</IToggle>
</template>
You're able to use the size property to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script>
export default {
data() {
return {
toggled: false
};
}
};
</script>
<template>
<IToggle v-model="toggled" size="sm">I accept the terms and conditions</IToggle>
<IToggle v-model="toggled" size="md">I accept the terms and conditions</IToggle>
<IToggle v-model="toggled" size="lg">I accept the terms and conditions</IToggle>
</template>
Applying the size size property to an IFormGroup will also set the chosen size to all of its IToggle inputs.