LVRS Storyboard Frame
components/layout/AppHeader.svx
Path: components/layout/AppHeader.svx
AppHeader
위치: qml/components/layout/AppHeader.qml
AppHeader는 옵션 메뉴 트리거, 제목/부제 블록 및 후행 작업 슬롯이 있는 상단 도구 모음 구성 요소입니다.
목적
- 일관된 간격/글꼴로 재사용 가능한 페이지 헤더를 제공하세요.
- 패딩과 간격을 줄여 컴팩트 모드를 지원합니다.
API
텍스트 및 동작:
titlesubtitlemenuVisiblemenuClicked()신호
밀도/레이아웃 제어:
compactcontentHorizontalPaddingcontentVerticalPaddingrowSpacingactionSpacingmenuButtonPadding
슬롯:
- 기본
actions슬롯(actionRow.data)
사용법
import LVRS 1.0 as LV
LV.AppHeader {
title: "Runs"
subtitle: "Production"
menuVisible: true
onMenuClicked: openDrawer()
LV.IconButton { iconName: "add" }
}
동작 원리
- 암시적 높이는 행 암시적 높이와 최소 헤더 정책을 통해 계산됩니다.
- 메뉴 버튼은
menuVisible == true인 경우에만 나타납니다. - 제목 블록은 채우기 너비를 사용합니다. 후행 작업 행이 오른쪽으로 정렬됩니다.
확장된 예: 컴팩트 헤더 변형
import LVRS 1.0 as LV
LV.AppHeader {
compact: true
title: "Inspector"
subtitle: "Selection Details"
LV.LabelButton {
text: "Apply"
tone: LV.AbstractButton.Primary
}
}
구현 노트
- 컴팩트 모드는 별도의 스타일 사전 설정을 전환하는 대신 내부 간격 값을 조정합니다.
- 작업 슬롯은 기본 속성 별칭이므로 하위 컨트롤을 구성 요소 내에서 직접 선언할 수 있습니다.