CheckBox

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

CheckBox는 선택적 텍스트 레이블이 있는 컴팩트한 체크 가능한 컨트롤입니다. 현재 기본값은 Figma 노드 44:724 ( State=On/Off x Available=True/False )에 맞춰 정렬됩니다.

목적

• 플랫폼 스타일에 독립적인 결정적 검사 지표 렌더링을 제공하십시오.
• Figma 체크박스 상태를 명시적인 색상 및 테두리 계약과 일치시키십시오.
• 체크된/체크되지 않은/비활성화된 상태에 대해 명시적인 팔레트 오버라이드를 지원합니다.

API

상태:

• checked(상속됨)
• enabled(상속됨)
• text(상속됨)

시각 맞춤화:

• boxSize
• boxRadius
• checkColor
• checkedColor
• uncheckedColor
• disabledCheckedColor
• disabledUncheckedColor
• checkMarkColorDisabled
• checkMarkStrokeWidth
• boxBorderWidthCheckedEnabled
• boxBorderWidthCheckedDisabled
• boxBorderWidthUncheckedEnabled
• boxBorderWidthUncheckedDisabled
• boxBorderColorCheckedEnabled
• boxBorderColorCheckedDisabled
• boxBorderColorUncheckedEnabled
• boxBorderColorUncheckedDisabled
• innerShadowSoftColor
• innerShadowStrongColor

해결된 읽기 전용 상태:

• showInnerShadow
• resolvedBoxBorderWidth
• resolvedBoxBorderColor

사용법

import LVRS 1.0 as LV

LV.CheckBox {
    text: "Remember me"
    checked: true
}

동작 원리

• 구성 요소는 checkable이며 기본적으로 테두리가 없습니다.
• 표시 상자는 명시적인 상태 매핑을 사용합니다:
  • 체크됨 + 활성화: 악센트 채우기, 테두리 없음, 내부 그림자 없음.
  • 확인 및 비활성화: panelBackground12 채우기, 0.5 테두리, 내부 그림자.
  • 선택 해제 + 활성화: bodyColor 채우기, 0.5 테두리, 내부 그림자.
  • 선택 해제 및 비활성화: panelBackground12 채우기, 테두리 없음, 내부 그림자.
• 체크 마크는 Canvas에 의해 그려졌으며, 체크/부팅/색상/스트로크 변경에 따라 다시 페인팅됩니다.
• 레이블은 색상 매핑이 적용된 본문 타이포그래피(12 / Medium)를 사용합니다:
  • 활성화됨: Theme.bodyColor
  • 비활성화됨: Theme.disabledColor
• 백그라운드 상호작용 상태는 투명하게 유지되어 지표/라벨 시각 자료만 표시됩니다.

고급 예제: 사용자 지정 체크 표시 굵기

import LVRS 1.0 as LV

LV.CheckBox {
    text: "Strict validation"
    checkMarkStrokeWidth: 2
    checkedColor: "#3A8DFF"
}

문제 해결

체크마크가 잘린 경우, 제어/컨테이너 높이와 사용자 정의 boxSize 조합을 확인하십시오.

주 관리 권고

동적 목록의 경우, 각 체크박스를 모델 인덱스 속성에 직접 바인딩하여 재배열 작업 중 오래된 클로저/인덱스 버그를 방지하십시오.