LVRS Storyboard Frame
components/control/TableCellItem.svx
Path: components/control/TableCellItem.svx
TableCellItem
위치: qml/components/control/display/TableCellItem.qml
TableCellItem는 가장 작은 테이블 기본 형식(선행 구분선 + 단일 텍스트 본문)입니다.
목적
- Figma 행 기하학과 일치하는 하나의 컴팩트 테이블 셀을 렌더링합니다.
- 테이블 셀 데이터 개체에서 직접 텍스트 및 시각적 재정의를 해결합니다.
API
itemData(객체와 유사한 셀 설명자, 선택 사항)textcellHeightcontentSpacingdividerColortextColorshowDividerclipContenttextStyle(레이블 스타일 열거형 값)
해결된 읽기 전용 값:
resolvedTextresolvedCellHeightresolvedContentSpacingresolvedDividerColorresolvedTextColorresolvedShowDividerresolvedClipContentresolvedTextStyle
사용법
import LVRS 1.0 as LV
LV.TableCellItem {
itemData: ({
text: "Renderer",
dividerColor: LV.Theme.panelBackground03
})
}
동작 원리
itemData는label,text,title와 같은 객체 키를 지원합니다.- 객체 키가 누락된 경우 구성 요소 수준 대체 경로 소품이 사용됩니다.
- 구분선과 텍스트 렌더링은 조밀하게 유지됩니다(
24px셀 높이, 줄임표 텍스트).
실용적인 팁
모델 기반 테이블에는 itemData를 사용하고 static/one-off 케이스에는 기본 text 할당을 유지합니다.
확장된 예: 헤더와 같은 셀 스타일 지정
import LVRS 1.0 as LV
LV.TableCellItem {
itemData: ({ label: "Column" })
showDivider: false
textStyle: description
textColor: LV.Theme.descriptionColor
}
FAQ
Q. itemData에 여러 레이블 필드가 포함된 경우 어떤 텍스트 키가 사용됩니까? A. 해결 순서는 label -> text -> title이며 구성 요소 text로 대체됩니다.
검증 체크리스트
- 구분선 가시성이 설계 요구 사항과 일치합니다.
- 텍스트 제거는 좁은 너비에서 작동합니다.
- 색상 토큰이 테이블 디자인에 일치합니다 (
panelBackground03구분자, 본문 텍스트).