LVRS Storyboard Frame

components/surfaces/AppCard.svx

Path: components/surfaces/AppCard.svx

Last modified:

AppCard

위치: qml/components/surfaces/AppCard.qml

AppCard는 구분자와 유연한 콘텐츠 슬롯이 있는 타이틀이 지정된 표면 컨테이너입니다.

목적

  • 메트릭/폼/요약 블록을 위한 재사용 가능한 카드 셸을 제공하십시오.
  • 내부 간격과 타이포그래피를 일관되게 유지하십시오.

API

  • title
  • subtitle
  • cardPadding(읽기 전용)
  • sectionSpacing(읽기 전용)
  • 기본 content 슬롯

레이아웃 계약

  • 헤더 블록: 제목 + 선택적 부제목.
  • 헤더 아래의 구분선.
  • 자식 childrenRect에 따라 크기가 조정된 유연한 콘텐츠 영역.

암시적 크기는 헤더/콘텐츠 너비와 패딩 계약을 통해 계산됩니다.

사용법

import LVRS 1.0 as LV

LV.AppCard {
    title: "System Health"
    subtitle: "Last 15 minutes"

    LV.Label { text: "No incidents detected"; style: body }
}

고급 예시: 푸터 작업이 포함된 양식 카드

import LVRS 1.0 as LV

LV.AppCard {
    title: "Profile"
    subtitle: "Account Settings"

    LV.VStack {
        spacing: 8
        LV.InputField { placeholderText: "Display name" }
        LV.HStack {
            LV.Spacer {}
            LV.LabelButton { text: "Save"; tone: LV.AbstractButton.Primary }
        }
    }
}

메모

가능하면 무거운 스크롤 가능한 콘텐츠를 카드 외부에 보관하십시오; AppCard는 전체 페이지 컨테이너가 아니라 콤팩트한 표면 블록으로 설계되었습니다.

FAQ

Q. AppCard가 페이지 수준 스크롤을 관리해야 합니까? A. 아니오. 페이지 스크롤 소유권을 외부에 두고 카드를 콘텐츠 블록으로 사용하십시오.