LVRS Storyboard Frame

components/control/TableCellItem.svx

Path: components/control/TableCellItem.svx

Last modified:

TableCellItem

위치: qml/components/control/display/TableCellItem.qml

TableCellItem는 가장 작은 테이블 기본 형식(선행 구분선 + 단일 텍스트 본문)입니다.

목적

  • Figma 행 기하학과 일치하는 하나의 컴팩트 테이블 셀을 렌더링합니다.
  • 테이블 셀 데이터 개체에서 직접 텍스트 및 시각적 재정의를 해결합니다.

API

  • itemData(객체와 유사한 셀 설명자, 선택 사항)
  • text
  • cellHeight
  • contentSpacing
  • dividerColor
  • textColor
  • showDivider
  • clipContent
  • textStyle(레이블 스타일 열거형 값)

해결된 읽기 전용 값:

  • resolvedText
  • resolvedCellHeight
  • resolvedContentSpacing
  • resolvedDividerColor
  • resolvedTextColor
  • resolvedShowDivider
  • resolvedClipContent
  • resolvedTextStyle

사용법

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 구분자, 본문 텍스트).