LVRS Storyboard Frame
components/control/ToggleSwitch.svx
Path: components/control/ToggleSwitch.svx
ToggleSwitch
위치: qml/components/control/check/ToggleSwitch.qml
ToggleSwitch는 QtQuick.Controls.Switch에 구현된 컴팩트한 온/오프 제어 장치이며, LVRS 사용자 정의 비주얼을 사용합니다.
목적
- 플랫폼 전반에 걸쳐 결정론적 스위치 기하학/애니메이션을 제공하십시오.
- 동작을 단순하게 유지하면서 팔레트 및 메트릭 맞춤화를 지원합니다.
API
지표:
trackWidth,trackHeight,trackPaddingknobSizetransitionDuration
색상:
onColor,offColordisabledTrackColortrackShadowColorknobFillColor
Figma 토큰 기본값:
onColor -> Theme.accentoffColor -> Theme.panelBackground12knobFillColor -> 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. 아니오. 파괴적인 흐름에 대해 명시적인 확인 컨트롤을 사용하십시오.