Switch

설정 하나를 즉시 전환합니다.

용법

알림

배포 알림 설정을 한 번의 조작으로 즉시 전환합니다.

<!-- Switch / Off -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

켜짐

켜진 상태에서 시작하며 같은 이름으로 현재 상태를 드러냅니다.

<!-- Switch / On -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

<!-- Switch / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

API

Vue 패키지: @sectile/vue/switch

컴포넌트

SwitchRoot
SwitchThumb

Props

`SwitchRootProps`

as: 타입PrimitiveAs기본값'button'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue: 타입boolean기본값false
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
modelValue: 타입boolean기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
value: 타입string기본값'on'
이 계약이 노출하는 현재 값입니다.

`SwitchThumbProps`

as: 타입PrimitiveAs기본값'span'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`SwitchSlotProps`

checked: 타입boolean
컨트롤이 선택됐는지 여부입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.

이벤트

`SwitchRoot`

update:modelValue: 페이로드boolean
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`SwitchValueChangeHandler`

type SwitchValueChangeHandler = (value: boolean) => void

파트

공통 범위: [data-scope="switch"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`thumb`	`[data-part="thumb"]`	트랙 위의 값 하나를 조절합니다.	—

키보드 동작

키	동작
`Space`	현재 값을 전환합니다.
`Tab`	문서의 기본 포커스 순서로 이동합니다.

접근성

루트는 스위치 의미를 제공하며 선택·비활성·읽기 전용 상태를 구분합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Switch ​

용법 ​

알림 ​

켜짐 ​

외부 상태 관리 ​

API ​

Props ​

SwitchRootProps ​

SwitchThumbProps ​

슬롯 ​

SwitchSlotProps ​

이벤트 ​

SwitchRoot ​

기타 타입 ​

SwitchValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​