로고SEED Design

Columns (Deprecated)

더 이상 사용되지 않습니다. `HStack`과 `wrap` prop을 사용하세요. 여러 열로 구성된 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

1
Content Width
2
import { Column, Columns } from "@seed-design/react";

/**
 * @deprecated use `HStack` instead.
 */
export default function ColumnsPreview() {
  return (
    <Columns bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
      <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        1
      </Column>
      <Column bg="bg.brandSolid" px="x4" py="x3" width="content" borderRadius="r2">
        Content Width
      </Column>
      <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        2
      </Column>
    </Columns>
  );
}

Usage

import { Columns, Column } from "@seed-design/react";
<Columns />

Props

Columns

PropTypeDefault
color?
ScopedColorFg | ScopedColorPalette | (string & {})
-
as?
ElementType<any, keyof IntrinsicElements>
-
asChild?
boolean
-
bg?
ScopedColorPalette | (string & {}) | ScopedColorBg
-
background?
ScopedColorPalette | (string & {}) | ScopedColorBg
-
bgGradient?
"fadeLayerFloating" | "fadeLayerDefault" | "glowMagic" | "shimmerMagic" | "glowMagicPressed" | "shimmerNeutral" | "highlightMagic" | "highlightMagicPressed"
-
backgroundGradient?
"fadeLayerFloating" | "fadeLayerDefault" | "glowMagic" | "shimmerMagic" | "glowMagicPressed" | "shimmerNeutral" | "highlightMagic" | "highlightMagicPressed"
-
bgGradientDirection?
(string & {}) | "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left"
-
backgroundGradientDirection?
(string & {}) | "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left"
-
borderColor?
ScopedColorPalette | (string & {}) | ScopedColorStroke
-
borderWidth?
0 | (string & {}) | 1
-
borderTopWidth?
0 | (string & {}) | 1
-
borderRightWidth?
0 | (string & {}) | 1
-
borderBottomWidth?
0 | (string & {}) | 1
-
borderLeftWidth?
0 | (string & {}) | 1
-
borderRadius?
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"
-
borderTopRightRadius?
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"
-
borderBottomLeftRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
width?
(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"
-
maxWidth?
(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"
-
minHeight?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
maxHeight?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
top?
0 | (string & {})
-
left?
0 | (string & {})
-
right?
0 | (string & {})
-
bottom?
0 | (string & {})
-
padding?
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"
-
paddingX?
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"
-
paddingY?
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"
-
paddingTop?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"
-
pt?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"
-
paddingRight?
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"
-
paddingBottom?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"
-
pb?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea"
-
paddingLeft?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
pl?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
bleedX?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
bleedY?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
bleedTop?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
bleedRight?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
bleedBottom?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
bleedLeft?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "asPadding"
-
position?
"relative" | "absolute" | "fixed" | "sticky"
-
overflowX?
"hidden" | "auto" | "visible" | "scroll"
-
overflowY?
"hidden" | "auto" | "visible" | "scroll"
-
zIndex?
number | (string & {})
-
flexGrow?
0 | 1 | (number & {})
-
flexShrink?
0 | (number & {})
-
flexDirection?
"row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse"
-
flexWrap?
"wrap" | "wrap-reverse" | "nowrap"
-
justifyContent?
"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround"
-
alignItems?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignContent?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignSelf?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
gap?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
unstable_transform?
string
-
_active?
{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }
-

Column

PropTypeDefault
width?
"content" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
color?
(string & {}) | ScopedColorFg | ScopedColorPalette
-
as?
ElementType<any, keyof IntrinsicElements>
-
asChild?
boolean
-
bg?
(string & {}) | ScopedColorPalette | ScopedColorBg
-
background?
(string & {}) | ScopedColorPalette | ScopedColorBg
-
bgGradient?
"fadeLayerFloating" | "fadeLayerDefault" | "glowMagic" | "shimmerMagic" | "glowMagicPressed" | "shimmerNeutral" | "highlightMagic" | "highlightMagicPressed"
-
backgroundGradient?
"fadeLayerFloating" | "fadeLayerDefault" | "glowMagic" | "shimmerMagic" | "glowMagicPressed" | "shimmerNeutral" | "highlightMagic" | "highlightMagicPressed"
-
bgGradientDirection?
(string & {}) | "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left"
-
backgroundGradientDirection?
(string & {}) | "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left"
-
borderColor?
(string & {}) | ScopedColorPalette | ScopedColorStroke
-
borderWidth?
0 | (string & {}) | 1
-
borderTopWidth?
0 | (string & {}) | 1
-
borderRightWidth?
0 | (string & {}) | 1
-
borderBottomWidth?
0 | (string & {}) | 1
-
borderLeftWidth?
0 | (string & {}) | 1
-
borderRadius?
0 | "full" | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6"
-
borderTopLeftRadius?
0 | "full" | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6"
-
borderTopRightRadius?
0 | "full" | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6"
-
borderBottomRightRadius?
0 | "full" | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6"
-
borderBottomLeftRadius?
0 | "full" | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6"
-
minWidth?
Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
maxWidth?
Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
height?
Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
minHeight?
Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
maxHeight?
Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})
-
top?
0 | (string & {})
-
left?
0 | (string & {})
-
right?
0 | (string & {})
-
bottom?
0 | (string & {})
-
padding?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
p?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
paddingX?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
px?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
paddingY?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
py?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
paddingTop?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"
-
pt?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"
-
paddingRight?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
pr?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
paddingBottom?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"
-
pb?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"
-
paddingLeft?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
pl?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
bleedX?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
bleedY?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
bleedTop?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
bleedRight?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
bleedBottom?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
bleedLeft?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "asPadding"
-
position?
"relative" | "absolute" | "fixed" | "sticky"
-
overflowX?
"hidden" | "auto" | "visible" | "scroll"
-
overflowY?
"hidden" | "auto" | "visible" | "scroll"
-
zIndex?
number | (string & {})
-
flexGrow?
0 | 1 | (number & {})
-
flexShrink?
0 | (number & {})
-
flexWrap?
"wrap" | "wrap-reverse" | "nowrap"
-
justifyContent?
"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround"
-
alignItems?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignContent?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignSelf?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
gap?
0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})
-
unstable_transform?
string
-
_active?
{ bg?: (string & {}) | ScopedColorPalette | ScopedColorBg | undefined; background?: (string & {}) | ScopedColorPalette | ScopedColorBg | undefined; }
-

Last updated on

InlineDeprecated

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

Text

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.