IconSegmentedControl

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

IconSegmentedControl는 IconButton 인스턴스를 테두리 없는 아이콘 세그먼트로 배열하는 세그먼트 컨테이너입니다.

목적

• 아이콘 세그먼트에 대한 Figma 세그먼트 컨테이너 셸을 제공하십시오.
• 자식 IconButton 인스턴스에서 세그먼트 수와 아이콘 콘텐츠를 도출합니다.
• 아이콘만 있는 세분화된 그룹의 시각적 일관성을 유지하십시오.

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.IconSegmentedControl {
    LV.IconButton { iconName: "projectStructure" }
    LV.IconButton { iconName: "projectStructure" }
    LV.IconButton { iconName: "projectStructure" }
}

동작 원리

• 하위 항목은 내부 행에서 스캔되며, 톤이 가능한 하위 항목은 세그먼트 버튼으로 취급됩니다.
• 기본 모드에서는 각 세그먼트 버튼 톤이 LV.AbstractButton.Borderless와 동기화됩니다.
• 컨테이너는 행으로부터 암시적 크기를 계산하고 세그먼트된 패딩/보더를 적용합니다.
• 아이콘 렌더링은 각 자식 IconButton의 책임으로 남아 있습니다.

실용적인 참고 사항

• IconButton 자식을 사용하여 아이콘 출처와 세그먼트 수를 결정하십시오.
• 형제자매 간에 아이콘 크기와 토큰 사용을 일관되게 유지하여 불규칙한 리듬을 방지하십시오.
• 이 구성 요소는 공유된 세그먼트 배경을 가진 컴팩트 아이콘 액션 그룹을 위해 설계되었습니다.

실수 패턴

• 임의의 Item 자식을 혼합하고 아이콘 세그먼트 동작을 기대합니다,
• 분할된 그룹 내에서 아이콘 버튼 패딩을 수동으로 일관되지 않은 설정하기
• forceBorderlessTone를 비활성화하고 의도치 않게 혼합된 톤 상태를 도입합니다.

검증 체크리스트

• 분할된 배경 및 테두리 토큰이 디자인 값과 일치합니다.
• 렌더링된 세그먼트 수는 제공된 IconButton 자식과 같습니다.
• 세그먼트 간 간격은 일정하게 유지됩니다 (2 ),
• 기본 톤 동작은 모든 세그먼트 버튼에 대해 테두리 없이 유지됩니다.