박스

박스 (Box)

레이아웃을 만들 때 쓰는 가장 기본적인 구성 요소(building block)예요. div 요소 기반으로 만들어졌어요.

출처: 문서

본문

기본적인 레이아웃 구성 요소예요.

<Box width="64px" height="64px">
  <DecorativeBox />
</Box>

API Reference

이 컴포넌트는 div 요소를 기반으로 하며 공통 margin props를 지원해요.

display prop 값만 Box 컴포넌트에 고유해요.

Prop Type Default
as "div" | "span" "div"
asChild boolean No default value
display Responsive<enum> No default value

다음 props는 Box, Flex, Grid, Container, Section 컴포넌트 간에 공유돼요. 레이아웃 컴포넌트에 대한 자세한 내용은 Layout에서 확인할 수 있어요.

Prop Type Default
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
height Responsive<string> No default value
minHeight Responsive<string> No default value
maxHeight Responsive<string> No default value
position Responsive<enum> No default value
inset Responsive<enum | string> No default value
top Responsive<enum | string> No default value
right Responsive<enum | string> No default value
bottom Responsive<enum | string> No default value
left Responsive<enum | string> No default value
overflow Responsive<enum> No default value
overflowX Responsive<enum> No default value
overflowY Responsive<enum> No default value
flexBasis Responsive<string> No default value
flexShrink Responsive<enum | string> No default value
flexGrow Responsive<enum | string> No default value
gridArea Responsive<string> No default value
gridColumn Responsive<string> No default value
gridColumnStart Responsive<string> No default value
gridColumnEnd Responsive<string> No default value
gridRow Responsive<string> No default value
gridRowStart Responsive<string> No default value
gridRowEnd Responsive<string> No default value
alignSelf Responsive<enum> No default value
justifySelf Responsive<enum> No default value

더 알아보기 (Learn more)