React

Stack (Deprecated)

세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

더 이상 사용되지 않습니다. VStack 컴포넌트를 사용하세요.

Usage

import { Stack } from "@seed-design/react";
<Stack />

Props

Prop

Type

asChild?boolean | undefined
color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined
left?0 | (string & {}) | undefined
background?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined
backgroundGradient?"glowMagic" | "glowMagicPressed" | "highlightMagic" | "highlightMagicPressed" | "shimmerMagic" | "shimmerNeutral" | undefined
borderColor?(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined
borderWidth?0 | (string & {}) | 1 | undefined
borderTopWidth?0 | (string & {}) | 1 | undefined
borderRightWidth?0 | (string & {}) | 1 | undefined
borderBottomWidth?0 | (string & {}) | 1 | undefined
borderLeftWidth?0 | (string & {}) | 1 | undefined
borderRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderTopLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderTopRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderBottomRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderBottomLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
boxShadow?(string & {}) | "s1" | "s2" | "s3" | undefined
width?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
minWidth?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
maxWidth?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
height?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
minHeight?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
maxHeight?ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined
top?0 | (string & {}) | undefined
right?0 | (string & {}) | undefined
bottom?0 | (string & {}) | undefined
padding?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
paddingX?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
paddingY?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
paddingTop?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"> | undefined
paddingRight?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
paddingBottom?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"> | undefined
paddingLeft?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
position?"fixed" | "relative" | "absolute" | "sticky" | undefined
overflowX?"hidden" | "auto" | "visible" | "scroll" | undefined
overflowY?"hidden" | "auto" | "visible" | "scroll" | undefined
zIndex?number | (string & {}) | undefined
justifyContent?"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined
alignItems?"center" | "flex-start" | "flex-end" | "stretch" | undefined
alignContent?"center" | "flex-start" | "flex-end" | "stretch" | undefined
alignSelf?"center" | "flex-start" | "flex-end" | "stretch" | undefined
gap?ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined
gridColumn?string | undefined
gridRow?string | undefined
unstable_transform?string | undefined
_active?{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined
as?React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined
hideFrom?BreakpointThreshold | undefined

Last updated on

이전 문서Menu Sheet다음 문서Footer

On this page

UsageProps