@empathyco/x-components
Version:
Empathy X Components
80 lines (59 loc) • 1.56 kB
Markdown
---
title: BaseSwitch
---
# BaseSwitch
Basic switch component to handle boolean values. This component receives its selected state using a
prop, and emits a Vue event whenever the user clicks it.
## Props
| Name | Description | Type | Default |
| ----------------------- | ----------- | -------------------- | ------------------ |
| <code>modelValue</code> | | <code>boolean</code> | <code>false</code> |
## Events
| Event name | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue | |
## Events
This component emits no events.
## See it in action
Here you have a basic example of how the switch is rendered.
_Try clicking it to see how it changes its state_
```vue live
<template>
<BaseSwitch @update:modelValue="value = !value" :modelValue="value" />
</template>
<script>
import { BaseSwitch } from '@empathyco/x-components';
export default {
name: 'BaseSwitchDemo',
components: {
BaseSwitch
},
data() {
return {
value: false
};
}
};
</script>
```
The switch component also supports using the `v-model` directive, to automatically handle its state
change:
```vue live
<template>
<BaseSwitch v-model="value" />
</template>
<script>
import { BaseSwitch } from '@empathyco/x-components';
export default {
name: 'BaseSwitchDemo',
components: {
BaseSwitch
},
data() {
return {
value: false
};
}
};
</script>
```