VStack

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

사용을 권장하지 않아요

레이아웃은 사용 중인 zero-runtime 스타일링 라이브러리로 구성하는 것을 권장해요. 이유와 대체 예제는 Styling 가이드에서 확인하세요.

Installation

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

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @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 컴포넌트 단계를 줄입니다.

Props

Prop

Type

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

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

color?(string & {}) | ScopedColorPalette | ScopedColorFg | 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

width?

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

minWidth?

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

maxWidth?

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

height?

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

minHeight?

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

maxHeight?

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

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

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

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

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

padding?

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

p?

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

paddingX?

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

px?

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

paddingY?

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

py?

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

paddingTop?

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

pt?

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

paddingRight?

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

pr?

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

paddingBottom?

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

pb?

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

paddingLeft?

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

pl?

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

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

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

overflowY?"hidden" | (string & {}) | "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 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | undefined

bleed?BleedValue | undefined

bleedX?BleedValue | undefined

bleedY?BleedValue | undefined

bleedTop?BleedValue | undefined

bleedRight?BleedValue | undefined

bleedBottom?BleedValue | undefined

bleedLeft?BleedValue | undefined

margin?MarginValue | undefined

m?MarginValue | undefined

marginX?MarginValue | undefined

mx?MarginValue | undefined

marginY?MarginValue | undefined

my?MarginValue | undefined

marginTop?MarginValue | undefined

mt?MarginValue | undefined

marginRight?MarginValue | undefined

mr?MarginValue | undefined

marginBottom?MarginValue | undefined

mb?MarginValue | undefined

marginLeft?MarginValue | undefined

ml?MarginValue | undefined

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

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

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

grow?boolean | Property.FlexGrow | undefined

shrink?boolean | Property.FlexShrink | 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>를 렌더링합니다.
지원하지 않는 StyleProps는 Box와 동일하게 열지 않습니다.