LVRS Storyboard Frame
components/control/TableHeader.svx
Path: components/control/TableHeader.svx
TableHeader
위치: qml/components/control/display/TableHeader.qml
TableHeader는 Table의 머리글 행을 렌더링합니다.
목적
- 열 레이블을 균일한 너비 분포로 렌더링합니다.
- 행 본문과 별개로 구분 기호 스타일을 제공합니다.
API
cellItems(선호됨, TableCellItem와 유사한 항목의 배열/목록 모델)columnsrowHeightcellHorizontalPaddingtextColorseparatorHeightseparatorColor
도우미 방법:
columnAt(index)columnText(index)columnPadding(index)
계산됨:
resolvedColumnSourceresolvedColumnCount
사용법
import LVRS 1.0 as LV
LV.TableHeader {
cellItems: [
{ label: "Column" },
{ label: "Column" },
{ label: "Column" }
]
}
동작 원리
cellItems가 기본 계약입니다. 레거시columns는 대체 경로로 유지됩니다.- 열 텍스트는 기본 항목 또는 개체 항목(
label/text/title대체 경로)을 허용합니다. - 선택적 열별
contentSpacing/horizontalPadding재정의가 지원됩니다. - 리피터 위임자는 균등한 분배를 위해
Layout.fillWidth를 사용합니다. - 하단 구분 기호는 전용 직사각형으로 렌더링됩니다(
panelBackground10기본값).
실용적인 팁
조밀한 12px 세미 볼드 텍스트는 컴팩트 메타데이터에 최적화되어 있으므로 헤더 레이블을 짧고 의미 있는 방식(필드 유형/범주)으로 유지하세요.
확장된 예: 객체 기반 헤더 정의
import LVRS 1.0 as LV
LV.TableHeader {
cellItems: [
{ label: "Service" },
{ text: "State", contentSpacing: LV.Theme.gap8 },
{ title: "Latency" }
]
}
FAQ
Q. TableHeader에서 열별 정렬을 직접 정의할 수 있나요? A. 현재 계약은 균일한 왼쪽 정렬 헤더 텍스트를 유지합니다. 열별 레이아웃에는 사용자 정의 파생 구성 요소가 필요합니다.
검증 체크리스트
- 헤더 개수가 예상 열 개수와 일치합니다.
- 분리막 두께/색상은 테마 계약을 준수하며,
- 객체 기반 열 레이블은 대체 경로 키를 통해 확인됩니다.