Switch 스위치

두 상태를 오가며 전환하는 스위치 컴포넌트예요.

출처: 문서

본문

켜기/끄기 전환 컴포넌트예요.

언제 사용하나요?

활성화/비활성화처럼 두 상태를 오가며 제어해야 할 때 사용해요.

크기

:::demo sm | md | lg 중 고를 수 있고, 기본값은 md예요.

<template>
  <d-switch v-model="checkedSmall" size="sm"></d-switch>
  <d-switch v-model="uncheckedMiddle"></d-switch>
  <d-switch v-model="checkedLarge" size="lg"></d-switch>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const checkedSmall = ref(true);
    const uncheckedMiddle = ref(true);
    const checkedLarge = ref(true);
    return {
      checkedSmall,
      uncheckedMiddle,
      checkedLarge,
    };
  },
});
</script>

<style scoped lang="scss">
.devui-switch:not(:last-of-type) {
  margin-right: 5px;
}
</style>

:::

비활성화

:::demo 스위치를 비활성화할지 여부를 정할 수 있고, 기본값은 false예요.

<template>
  <d-switch class="mr-1" v-model="checkedDisabled" :disabled="true"></d-switch>
  <d-switch v-model="checkedDisabled1" :disabled="true"></d-switch>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const checkedDisabled = ref(true);
    const checkedDisabled1 = ref(false);
    return {
      checkedDisabled,
      checkedDisabled1,
    };
  },
});
</script>

:::

스타일 커스터마이즈

:::demo 텍스트 설명/아이콘을 넣을 수 있어요

<template>
  <div>
    <d-switch v-model="checkedColor" color="#FECC55"></d-switch>
    <d-switch color="#50D4AB" v-model="checkedIcon">
      <template #checkedContent>
        <i class="icon-right"></i>
      </template>
      <template #uncheckedContent>
        <i class="icon-error"></i>
      </template>
    </d-switch>
    <d-switch v-model="checkedSmContent" size="sm">
      <template #checkedContent>开</template>
      <template #uncheckedContent>关</template>
    </d-switch>
    <d-switch v-model="checkedContent">
      <template #checkedContent>开</template>
      <template #uncheckedContent>关</template>
    </d-switch>
    <d-switch v-model="checkedLgContent" size="lg">
      <template #checkedContent>开</template>
      <template #uncheckedContent>关</template>
    </d-switch>
  </div>

</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const checkedColor = ref(true);
    const checkedContent = ref(false);
    const checkedSmContent = ref(false);
    const checkedLgContent = ref(false);
    const checkedIcon = ref(true);
    return {
      checkedColor,
      checkedContent,
      checkedSmContent,
      checkedLgContent,
      checkedIcon,
    };
  },
});
</script>

:::

바인딩 값 커스터마이즈

:::demo switch가 켜지고 꺼질 때의 값을 직접 정할 수 있어요. 켜졌을 때는 active-value, 꺼졌을 때는 inactive-value가 돼요

<template>
  <d-switch class="mr-1" v-model="activeValue1" active-value="打开" inactive-value="关闭"></d-switch>
  <d-switch class="mr-1" v-model="activeValue2" :active-value="1" :inactive-value="0"></d-switch>
  <d-switch v-model="activeValue3" :active-value="true" :inactive-value="false"></d-switch>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const activeValue1 = ref('打开');
    const activeValue2 = ref(0);
    const activeValue3 = ref(true);
    return {
      activeValue1,
      activeValue2,
      activeValue3,
    };
  },
});
</script>

:::

Switch 파라미터

Switch 이벤트

Switch 슬롯

Switch 타입 정의

ISwitchSize

type ISwitchSize = 'sm' | 'md' | 'lg';

더 알아보기 (Learn more)

d-switch는 설정 화면의 기능 토글에 가장 많이 쓰이는 컴포넌트예요. active-value/inactive-value를 지정하면 boolean 대신 문자열이나 숫자 상태를 그대로 모델에 담을 수 있어요.