Kunlun DesignEnglish
Switch
Switch is used for switching between two opposing states.
Basic usage
Bind 'v-model' to a variable of type 'Boolean'.
<>
<template>
<kl-switch v-model="value1"></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
</script>
<style lang="scss" scoped>
* {
margin-left: 5px;
}
</style>
Color settings
You can use the 'active-color' property and the 'inactive-color' property to set the background color of the switch.
CloseOpen
CloseOpen
<>
<template>
<kl-switch v-model="value2" activeText="Open" inactiveText="Close"></kl-switch>
<kl-switch
v-model="value1"
active-color="red"
inactive-color="blue"
active-text="Open"
inactive-text="Close"
></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
Size
Use the size property to change the size of the switch. In addition to the default size, there are two other options: large, small.
CloseOpen
CloseOpen
CloseOpen
<>
<template>
<kl-switch v-model="value" size="large" active-text="Open" inactive-text="Close"></kl-switch>
<kl-switch v-model="value" size="default" active-text="Open" inactive-text="Close"></kl-switch>
<kl-switch v-model="value" size="small" active-text="Open" inactive-text="Close"></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
Disabled state
Add the 'disabled' attribute to set the switch to the disabled state.
CloseOpen
CloseOpen
<>
<template>
<kl-switch v-model="value1" active-text="Open" inactive-text="Close"></kl-switch>
<kl-switch v-model="value2" disabled active-text="Open" inactive-text="Close"></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
Text description
Text description
The UnforgottenYasuo
<>
<template>
<kl-switch v-model="value1"></kl-switch>
<kl-switch v-model="value2" activeText="Yasuo" inactiveText="The Unforgotten"></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
Bind the data type
Use the 'active-value' attribute and the 'inactive-value' property to set the text description of the switch.
value:
The UnforgottenYasuo
value:
999111
<>
<template>
<h3>value:{{ value }}</h3>
<kl-switch
v-model="value"
activeText="Yasuo"
inactiveText="The Unforgotten"
activeValue="Yasuo"
inactiveValue="The Unforgotten"
></kl-switch>
<hr />
<h3>value:{{ value1 }}</h3>
<kl-switch
v-model="value1"
activeText="111"
inactiveText="999"
activeValue="111"
inactiveValue="999"
></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref()
const value1 = ref()
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
Display the custom icon
Use the inactive-icon and active-icon properties to add icons. Use the inline-prompt property to control the display of icons within points.
<>
<template>
<kl-switch v-model="value1"></kl-switch>
<kl-switch v-model="value2" activeIcon="KlOtherCorrect" inactiveIcon="KlOtherError"></kl-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
</script>
<style lang="scss" scoped>
* {
display: block;
}
</style>
API
Attribute
| name | Description | Type | The default value is |
|---|---|---|---|
| v-model | Binding value | boolean | — |
| disabled | Whether to disable | boolean | fales |
| active-value | The value when the switch state is on | boolean / string / number | true |
| inactive-value | The value when the status of the switch is off | boolean / string / number | false |
| active-icon | The icon displayed when the switch state is on, using | with Icon string | — |
| inactive-icon | The icon displayed when the switch state is off, using | with Icon string | — |
| active-text | The text description when the switch is opened is | string | — |
| inactive-text | The text description when the switch is turned off | string | — |
| active-color | When in the on state, the background color | string | — |
| inactive-color | The background color of the off state is | string | — |
| name | Equivalent to the native input name attribute | string | — |
Event
| Name | Description | Callback parameters |
|---|---|---|
| change | Triggered only when the modelValue changes | val |