LVRS Storyboard Frame
components/surfaces/AppCard.svx
Path: components/surfaces/AppCard.svx
AppCard
위치: qml/components/surfaces/AppCard.qml
AppCard는 구분자와 유연한 콘텐츠 슬롯이 있는 타이틀이 지정된 표면 컨테이너입니다.
목적
- 메트릭/폼/요약 블록을 위한 재사용 가능한 카드 셸을 제공하십시오.
- 내부 간격과 타이포그래피를 일관되게 유지하십시오.
API
titlesubtitlecardPadding(읽기 전용)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. 아니오. 페이지 스크롤 소유권을 외부에 두고 카드를 콘텐츠 블록으로 사용하십시오.