CapDriveSpacer
Stack에 남은 공간을 할당하여 콘텐츠를 양쪽으로 밀어 넣거나 콘텐츠에 대한 탄력적 거리를 확보합니다. minLength은 최소 길이를 설정하며, 명시적인 width 또는 height는 해당 방향의 크기를 고정할 수 있습니다.
예제
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
사용법
- Spacer는 그리지 않습니다. HStack에서는 가로, VStack에서는 세로 남은 공간을 쓰며 minLength가 하한입니다. width/height로 축을 고정할 수 있고 배경·투명도·효과는 없습니다.
- 숫자 크기는 포인트입니다. auto는 내용을 측정하고 fill은 부모가 배정한 공간을 씁니다. 부모 크기부터 정하세요. fill이나 긴 텍스트가 고정 부모 공간을 늘리지는 않습니다.
속성
minLength?number부모 Stack 주축의 최소 유연한 공간(포인트)입니다.
예제
0공통 속성
width?number | "auto" | "fill"너비: 포인트, 자동 크기 또는 부모 영역 채우기.
예제
"auto"height?number | "auto" | "fill"높이: 포인트, 자동 크기 또는 부모 영역 채우기.
예제
"auto"animations?SpacerAnimation[]속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.
예제
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | number형제 요소 사이의 안정적인 식별자.
예제
""조합 예제
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
애니메이션
widthheightminLength생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.
| 속성 | 생략 시 동작 |
|---|---|
minLength | 0 |