Stack (Deprecated)
세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다. (Deprecated)
1
2
3
Deprecated
Stack 컴포넌트는 더 이상 사용되지 않습니다. 대신 VStack을 사용하세요.
Usage
Props
| Prop | Type | Default |
|---|---|---|
shrink? | 0 | (number & {}) | - |
grow? | true | 0 | 1 | (number & {}) | - |
justify? | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | - |
align? | "center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch" | - |
wrap? | true | "wrap" | "wrap-reverse" | "nowrap" | - |
direction? | "row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse" | - |
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" | - |
flexShrink? | 0 | (number & {}) | - |
flexGrow? | 0 | 1 | (number & {}) | - |
overflowY? | "hidden" | "visible" | "scroll" | "auto" | - |
overflowX? | "hidden" | "visible" | "scroll" | "auto" | - |
position? | "relative" | "absolute" | "fixed" | "sticky" | - |
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 | - |
bg? | ScopedColorPalette | (string & {}) | ScopedColorBg | - |
background? | ScopedColorPalette | (string & {}) | ScopedColorBg | - |
as? | ElementType<any, keyof IntrinsicElements> | - |
color? | ScopedColorFg | ScopedColorPalette | (string & {}) | - |
display? | "flex" | "none" | "flex" |