VStack

VStack 컴포넌트는 Lynx에서 자식 요소를 세로 방향으로 쌓는 레이아웃 컴포넌트입니다.

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

Usage

import { Box, Text, VStack } from "@seed-design/lynx-react";

export function App() {
  return (
    <VStack gap="x2" bg="bg.neutralWeak" borderRadius="r3" p="x3" align="stretch">
      <Box bg="bg.layerDefault" borderRadius="r2" p="x3">
        <Text textStyle="t4Medium">첫 번째 항목</Text>
      </Box>
      <Box bg="bg.layerDefault" borderRadius="r2" p="x3">
        <Text textStyle="t4Medium">두 번째 항목</Text>
      </Box>
    </VStack>
  );
}

VStack은 Lynx 네이티브 <view>를 직접 렌더링하며 display="flex"와 flexDirection="column"을 기본 적용합니다. Box를 내부에서 합성하지 않아 반복 렌더링에서 primitive 컴포넌트 단계를 줄입니다.

성능에 민감한 반복 레이아웃을 앱 코드에서 구성할 때는 native <view>/<text>에 Tailwind utility className을 직접 사용하는 방식을 우선 고려하세요. 패키지 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은 런타임 값이 필요한 경우에만 제한적으로 사용합니다.

Props

Prop

Type

align?"center" | (string & {}) | "flexStart" | "flexEnd" | "stretch" | undefined

justify?"center" | (string & {}) | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | undefined

wrap?boolean | "wrap" | "nowrap" | undefined

grow?boolean | Property.FlexGrow | undefined

shrink?boolean | Property.FlexShrink | undefined

bindtouchstart?(() => void) | undefined

bindtouchend?(() => void) | undefined

bindtouchcancel?(() => void) | undefined

bg?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined

background?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined

color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined

borderColor?(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined

borderWidth?0 | 1 | (string & {}) | undefined

borderTopWidth?0 | 1 | (string & {}) | undefined

borderRightWidth?0 | 1 | (string & {}) | undefined

borderBottomWidth?0 | 1 | (string & {}) | undefined

borderLeftWidth?0 | 1 | (string & {}) | 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

width?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

height?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

top?0 | (string & {}) | undefined

left?0 | (string & {}) | undefined

right?0 | (string & {}) | undefined

bottom?0 | (string & {}) | undefined

padding?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

p?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingX?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

px?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingY?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

py?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingTop?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

pt?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

paddingRight?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

pr?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingBottom?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

pb?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

paddingLeft?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

pl?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

position?(string & {}) | "relative" | "absolute" | "fixed" | undefined

overflowX?(string & {}) | "hidden" | "visible" | undefined

overflowY?(string & {}) | "hidden" | "visible" | undefined

zIndex?Property.ZIndex | undefined

justifySelf?Property.JustifySelf | undefined

alignContent?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

alignSelf?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

gap?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

Layout Aliases

VStack은 자주 쓰는 flex 속성을 짧은 alias로 제공합니다.

Prop	적용되는 style
`align`	`alignItems`
`justify`	`justifyContent`
`wrap`	`flexWrap`
`grow`	`flexGrow`
`shrink`	`flexShrink`

나머지 스타일 prop은 Box와 동일한 범위에서 사용할 수 있습니다.

<VStack gap="x3" align="center" justify="center">
  <Text>세로 정렬</Text>
</VStack>

웹 버전과의 차이

Lynx VStack은 React VStack과 다음과 같은 차이가 있습니다.

as, asChild를 지원하지 않습니다. 항상 Lynx 네이티브 <view>를 렌더링합니다.
Stack이라는 deprecated alias는 제공하지 않습니다. Lynx에서는 VStack / HStack을 명시적으로 사용합니다.
지원하지 않는 StyleProps는 Box와 동일하게 열지 않습니다.