LabelSegmentedControl

위치: /Users/ymy/Developer/LVRS/qml/components/control/buttons/LabelSegmentedControl.qml

LabelSegmentedControl는 LabelButton 인스턴스를 경계 없는 세그먼트로 배열하는 세그먼트 컨테이너입니다.

목적

• 텍스트 세그먼트에 대한 Figma 세그먼트 컨테이너 셸을 제공하십시오.
• 자식 LabelButton 인스턴스에서 세그먼트 수와 가시 레이블을 파생합니다.
• 2 ~ 7 세그먼트 케이스 전반에 걸쳐 세그먼트 그룹 스타일링 및 간격을 일관되게 유지하십시오.

API

컨테이너 스타일링:

• horizontalPadding(기본값: Theme.gap4)
• verticalPadding(기본값: Theme.gap4)
• spacing(기본값: Theme.gap2)
• borderWidth(기본값: 2)
• cornerRadius(기본값: Theme.radiusMd)
• backgroundColor(기본값: Theme.panelBackground08)
• borderColor(기본값: Theme.panelBackground12)

행동:

• forceBorderlessTone(기본값: true)
• segmentCount (읽기 전용, 자식 세그먼트 버튼에서 계산)

구성:

• default property alias buttons: segmentRow.data

사용법

import LVRS 1.0 as LV

LV.LabelSegmentedControl {
    LV.LabelButton { text: "Button" }
    LV.LabelButton { text: "Button" }
    LV.LabelButton { text: "Button" }
}

동작 원리

• 하위 항목은 내부 행에서 수집됩니다.
• tone를 노출하는 모든 자녀는 세그먼트 버튼으로 간주됩니다.
• forceBorderlessTone가 활성화된 경우, 각 세그먼트 버튼 톤이 LV.AbstractButton.Borderless와 동기화됩니다.
• 암시적 크기는 행 암시적 크기에 세분화된 컨테이너 패딩을 더한 것에서 파생됩니다.

실용적인 참고 사항

• 세그먼트 텍스트와 세그먼트 수는 제공된 LabelButton 자식에 의해서만 제어되어야 합니다.
• 세그먼트 라벨을 짧게 유지하여 콤팩트한 세그먼트 밀도를 유지하십시오.
• 텍스트 토글/그룹화된 작업 중 시각적으로 하나의 캡슐 컨테이너를 공유하는 이 컴포넌트를 사용하십시오.

실수 패턴

• 버튼이 없는 시각 아동을 추가하고 그들이 세그먼트 형태로 참여하기를 기대합니다.
• 세그먼트별 패딩/지름을 일관되지 않은 설정으로, 세그먼트된 컨테이너 쉘을 사용하지 않고,
• forceBorderlessTone가 아직 활성화된 상태에서 비무경계 톤을 강제합니다.

검증 체크리스트

• 컨테이너 채우기/경계/라디우스가 세분화된 디자인 토큰 값과 일치합니다,
• 모든 보이는 세그먼트는 제공된 LabelButton 자식에서 렌더링됩니다.
• 세그먼트 간격은 서로 다른 세그먼트 수에 따라 일정합니다 (2).
• 기본 구성에서 효과적인 버튼 톤은 테두리가 없습니다.