Box
Box 컴포넌트는 가장 기초적인 레이아웃 컴포넌트입니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
Box Example
Usage
Props
| Prop | Type | Default |
|---|---|---|
gap? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
alignSelf? | "center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch" | - |
alignContent? | "center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch" | - |
alignItems? | "center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch" | - |
justifyContent? | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | - |
flexWrap? | "wrap" | "wrap-reverse" | "nowrap" | - |
flexDirection? | "row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse" | - |
flexShrink? | 0 | (number & {}) | - |
flexGrow? | 0 | 1 | (number & {}) | - |
overflowY? | "hidden" | "visible" | "scroll" | "auto" | - |
overflowX? | "hidden" | "visible" | "scroll" | "auto" | - |
position? | "relative" | "absolute" | "fixed" | "sticky" | - |
display? | "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock" | - |
pl? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingLeft? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
pb? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingBottom? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
pr? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingRight? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
pt? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingTop? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
py? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingY? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
px? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
paddingX? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
p? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
padding? | 0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
bottom? | 0 | (string & {}) | - |
right? | 0 | (string & {}) | - |
left? | 0 | (string & {}) | - |
top? | 0 | (string & {}) | - |
maxHeight? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
minHeight? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
height? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
maxWidth? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
minWidth? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
width? | (string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | - |
borderBottomLeftRadius? | 0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | - |
borderBottomRightRadius? | 0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | - |
borderTopRightRadius? | 0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | - |
borderTopLeftRadius? | 0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | - |
borderRadius? | 0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | - |
borderLeftWidth? | 0 | (string & {}) | 1 | - |
borderBottomWidth? | 0 | (string & {}) | 1 | - |
borderRightWidth? | 0 | (string & {}) | 1 | - |
borderTopWidth? | 0 | (string & {}) | 1 | - |
borderWidth? | 0 | (string & {}) | 1 | - |
borderColor? | ScopedColorPalette | (string & {}) | ScopedColorStroke | - |
color? | ScopedColorPalette | (string & {}) | ScopedColorFg | - |
bg? | ScopedColorBg | ScopedColorPalette | (string & {}) | - |
background? | ScopedColorBg | ScopedColorPalette | (string & {}) | - |
as? | ElementType<any, keyof IntrinsicElements> | - |