Switch

The switch selector used for switching between two states.

Basic usage

v-model is the binding value, true is the checked state, false is the unchecked state, checked-color is the background color of the checked state, and unchecked-color is the background color of the unchecked state.

vue

<template>
  <div class="box" style="display: flex; gap: 10px">
    <dk-switch v-model="checkValue"></dk-switch>
    <dk-switch
      v-model="checkValue2"
      checked-color="#10b981"
      unchecked-color="#d33f3f"
    ></dk-switch>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    checkValue: false,
    checkValue2: true
  })
  const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

Disabled

disabled indicates the disabled state.

vue

<template>
<div class="box" style="display: flex; gap: 10px">
  <dk-switch v-model="checkValue" disabled></dk-switch>
  <dk-switch v-model="checkValue2" disabled></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

Size

size is the size, optional values are large, medium, small, mini, default is small.

vue

<template>
<div class="box" style="display: flex; gap: 10px">
  <dk-switch v-model="checkValue" size="large"></dk-switch>
  <dk-switch v-model="checkValue" size="medium"></dk-switch>
  <dk-switch v-model="checkValue" size="small"></dk-switch>
  <dk-switch v-model="checkValue" size="mini"></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false
})
const { checkValue } = toRefs(data)
</script>

展开

Text

checked-text is a selected copy, while unchecked-text is an unselected copy. Width is the width of the switch. When the width is not set, the width of the switch is adaptive. When the width is set, the width of the switch is the set width, and ellipses are displayed for any excess.

open

Set width

No width set

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch 
    v-model='checkValue'
    checked-text='open'
    unchecked-text='close'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-text='open'
    unchecked-text='close'
  ></dk-switch>
</div>
<div class='box' style='display: flex; gap: 10px; align-items: center; margin-top:10px'>
  <dk-switch
    v-model='checkValue'
    checked-text='Set width'
    unchecked-text='Switch width exceeds display ellipsis'
    width="100px"
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-text='No width set'
    unchecked-text='Width adaptation of switches'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

Switch with icon

checked-icon is the icon of the selected state, and unchecked-icon is the icon of the unchecked state.

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch
    v-model='checkValue'
    checked-icon='check'
    unchecked-icon='close'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-icon='check'
    unchecked-icon='close'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

Loading

loading is the Loading state, checked-custom-icon is the custom icon of the selected state, and unchecked-custom-icon is the custom icon of the unchecked state.

vue

<template>
<div class='box' style='display: flex; gap: 10px; align-items: center'>
  <dk-switch v-model='checkValue' loading></dk-switch>
  <dk-switch v-model='checkValue2' loading></dk-switch>
</div>
<div class='box' style='display: flex; gap: 10px; align-items: center; margin-top:10px'>
  <dk-switch
    v-model='checkValue'
    checked-custom-icon='IconCheck'
    unchecked-custom-icon='IconClose'
  ></dk-switch>
  <dk-switch
    v-model='checkValue2'
    checked-custom-icon='IconCheck'
    unchecked-custom-icon='IconClose'
  ></dk-switch>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  checkValue: false,
  checkValue2: true
})
const { checkValue, checkValue2 } = toRefs(data)
</script>

展开

attribute

parameter	explain	type	Optional values	Default value
`v-model`	Binding value	`boolean`	-	-
`checked-color`	Background color when selected	`string`	-	`#409eff`
`unchecked-color`	Background color when not selected	`string`	-	`#c0ccda`
`checked-text`	Selected copy	`string`	-	-
`unchecked-text`	Copy when not selected	`string`	-	-
`checked-icon`	Icon when selected	`string`	-	-
`unchecked-icon`	The icon when it is not selected	`string`	-	-
`checked-custom-icon`	Custom icon when selected	`string`	-	-
`unchecked-custom-icon`	Custom icon when not selected	`string`	-	-
`width`	Width of switch	`string`	-	-
`size`	Size of switch	`string`	`large` `medium` `small` `mini`	`small`
`disabled`	Whether to disable	`boolean`	`true` `false`	`false`
`loading`	Whether it is loaded	`boolean`	`true` `false`	`false`

Event

Event	explain	Callback
`change`	Triggered when the switch status changes	`(value: boolean) => value`

Switch ​

Contributors ​

Switch

Contributors