LVRS Storyboard Frame

components/control/ToggleSwitch.svx

Path: components/control/ToggleSwitch.svx

Last modified:

ToggleSwitch

위치: qml/components/control/check/ToggleSwitch.qml

ToggleSwitch는 QtQuick.Controls.Switch에 구현된 컴팩트한 온/오프 제어 장치이며, LVRS 사용자 정의 비주얼을 사용합니다.

목적

  • 플랫폼 전반에 걸쳐 결정론적 스위치 기하학/애니메이션을 제공하십시오.
  • 동작을 단순하게 유지하면서 팔레트 및 메트릭 맞춤화를 지원합니다.

API

지표:

  • trackWidth, trackHeight, trackPadding
  • knobSize
  • transitionDuration

색상:

  • onColor, offColor
  • disabledTrackColor
  • trackShadowColor
  • knobFillColor

Figma 토큰 기본값:

  • onColor -> Theme.accent
  • offColor -> Theme.panelBackground12
  • knobFillColor -> Theme.textPrimary

상태:

  • checked , enabled , text (상속)

사용법

import LVRS 1.0 as LV

LV.ToggleSwitch {
    checked: true
    onToggled: console.log("state", checked)
}

동작 원리

  • 노브 x-위치는 계산된 오프/온 좌표 사이에서 애니메이션됩니다.
  • 노브는 안정적인 원형 채우기 렌더링을 위해 Canvas로 렌더링됩니다.
  • 암시적 너비는 텍스트가 비어 있지 않은 경우에만 텍스트 레이블 영역을 포함합니다.

고급 예시: 저대비 비활성화 팔레트

import LVRS 1.0 as LV

LV.ToggleSwitch {
    enabled: false
    checked: true
    disabledTrackColor: "#4B4B4B"
}

메모

스위치 애니메이션 지속 시간은 반응성을 위해 짧게 유지해야 하며, 자주 전환되는 컨트롤에서 긴 전환을 피하십시오.

FAQ

Q. ToggleSwitch는 되돌릴 수 없는 파괴 행위에 적합합니까? A. 아니오. 파괴적인 흐름에 대해 명시적인 확인 컨트롤을 사용하십시오.