Toggle Button

같은 작업을 다시 실행할 때까지 눌림 상태를 유지합니다.

용법

서식

같은 작업을 다시 누를 때까지 서식 기능의 눌림 상태를 유지합니다.

<!-- Toggle Button / Formatting -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'

const pressed = ref(false)
</script>

<template>
  <ToggleButton v-model="pressed">Bold</ToggleButton>
</template>

경고

알림 감시 기능을 다시 끌 때까지 활성 상태로 유지합니다.

<!-- Toggle Button / Alert -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'

const pressed = ref(false)
</script>

<template>
  <ToggleButton v-model="pressed">Bold</ToggleButton>
</template>

외부 상태 관리

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

<!-- Toggle Button / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { ToggleButton } from '@sectile/vue/toggle-button'

const pressed = ref(false)
</script>

<template>
  <ToggleButton v-model="pressed">Bold</ToggleButton>
</template>

API

Vue 패키지: @sectile/vue/toggle-button

컴포넌트

ToggleButton

Props

`ToggleButtonProps`

as: 타입PrimitiveAs기본값'button'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue: 타입boolean기본값false
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
modelValue: 타입boolean기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.

슬롯

`ToggleButtonSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
pressed: 타입boolean
토글이 눌린 상태인지 여부입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.

이벤트

`ToggleButton`

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

기타 타입

`ToggleButtonValueChangeHandler`

type ToggleButtonValueChangeHandler = (value: boolean) => void

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—

키보드 동작

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

접근성

버튼이 눌림 상태를 노출하고 비활성 동작과 읽기 전용 동작을 구분합니다.

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

Toggle Button ​

용법 ​

서식 ​

경고 ​

외부 상태 관리 ​

API ​

Props ​

ToggleButtonProps ​

슬롯 ​

ToggleButtonSlotProps ​

이벤트 ​

ToggleButton ​

기타 타입 ​

ToggleButtonValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​