CapDriveHStack
아이콘과 숫자, 숫자와 단위 등의 가로 조합에 적합하도록 자막 View을 왼쪽에서 오른쪽으로 정렬합니다. spacing은 인접 간격을 설정하고, alignment는 이 줄 내에서 위쪽 및 아래쪽 또는 텍스트 기준선 정렬을 설정합니다.
예제
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
사용법
- alignment는 행 내부의 위아래·텍스트 기준선 정렬이며 행 전체 좌우 위치가 아닙니다. 양끝 배치는 Spacer, 크기가 다른 숫자와 단위는 firstTextBaseline을 사용하세요.
- 숫자 크기는 포인트입니다. auto는 내용을 측정하고 fill은 부모가 배정한 공간을 씁니다. 부모 크기부터 정하세요. fill이나 긴 텍스트가 고정 부모 공간을 늘리지는 않습니다.
- 공간 배치 후 x/y와 transform을 적용합니다. 자식을 옮겨도 형제는 밀리지 않습니다. 간격은 spacing 또는 Spacer, 완성된 View의 회전·확대는 transform을 사용하세요.
속성
children?ViewContent자식 그리기 콘텐츠.
spacing?number자식 뷰 사이 간격(포인트).
8alignment?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"행 안의 세로 정렬: top, center, bottom 또는 첫/마지막 글자 기준선입니다.
"center"공통 속성
width?number | "auto" | "fill"너비: 포인트, 자동 크기 또는 부모 영역 채우기.
100height?number | "auto" | "fill"높이: 포인트, 자동 크기 또는 부모 영역 채우기.
80padding?number콘텐츠 안쪽 여백(포인트).
0x?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0y?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0transform?ViewTransform레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.
{rotation: 0}background?Paint배경 색상 또는 그라디언트입니다. clear는 투명입니다.
"clear"opacity?number전체 View 불투명도: 0은 투명, 1은 불투명입니다.
1cornerRadius?number모서리 반경(포인트)입니다.
0clipped?booleanView 경계를 벗어난 내용을 자릅니다.
falseclip?"rectangle" | "ellipse"자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.
"rectangle"mask?View | null알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.
<Circle width="fill" height="fill" background="white"/>zIndex?number형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.
0blur?number흐림 반경(포인트)이며 0은 흐림 없음입니다.
4innerShadow?DrawingEffect효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffect효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?Color바깥 그림자 색상입니다.
HDR("black")shadowOpacity?number그림자 불투명도 0–1이며 0은 숨김입니다.
0shadowRadius?number바깥 그림자의 흐림 반경(포인트)입니다.
4shadowX?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
0shadowY?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
2animations?Animation[]속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number형제 요소 사이의 안정적인 식별자.
조합 예제
function main() {
return (
<HStack width={260} alignment="firstTextBaseline" spacing={4}>
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
<Spacer minLength={12} />
<Symbol name="speedometer" fontSize={24} />
</HStack>
);
}
애니메이션
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.