LVRS Storyboard Frame

components/layout/AppHeader.svx

Path: components/layout/AppHeader.svx

Last modified:

AppHeader

위치: qml/components/layout/AppHeader.qml

AppHeader는 옵션 메뉴 트리거, 제목/부제 블록 및 후행 작업 슬롯이 있는 상단 도구 모음 구성 요소입니다.

목적

  • 일관된 간격/글꼴로 재사용 가능한 페이지 헤더를 제공하세요.
  • 패딩과 간격을 줄여 컴팩트 모드를 지원합니다.

API

텍스트 및 동작:

  • title
  • subtitle
  • menuVisible
  • menuClicked() 신호

밀도/레이아웃 제어:

  • compact
  • contentHorizontalPadding
  • contentVerticalPadding
  • rowSpacing
  • actionSpacing
  • menuButtonPadding

슬롯:

  • 기본 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
    }
}

구현 노트

  • 컴팩트 모드는 별도의 스타일 사전 설정을 전환하는 대신 내부 간격 값을 조정합니다.
  • 작업 슬롯은 기본 속성 별칭이므로 하위 컨트롤을 구성 요소 내에서 직접 선언할 수 있습니다.