Layout
Box
레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.import { Box } from '@vapor-ui/core';
export default function DefaultBox() {
return (
<Box padding="$400" backgroundColor="$gray-100" borderRadius="$300">
This is a basic Box component with padding, background color, and border radius.
</Box>
);
}Property
Display Types
Box 컴포넌트는 다양한 디스플레이 타입을 지원하여 레이아웃을 유연하게 구성할 수 있습니다.
import { Box, Text } from '@vapor-ui/core';
export default function BoxDisplay() {
return (
<div className="flex flex-col gap-6">
<Text typography="heading4" render={<h4 />}>
Display Types
</Text>
<div className="flex flex-col gap-4">
<div>
<Text>Block (default)</Text>
<Box
display="block"
padding="$300"
backgroundColor="$blue-200"
borderRadius="$200"
>
Block element takes full width
</Box>
</div>
<div>
<Text>Inline</Text>
<Box
display="inline"
padding="$200"
backgroundColor="$green-200"
borderRadius="$200"
>
Inline element
</Box>
<span className="mx-2">flows with text</span>
<Box
display="inline"
padding="$200"
backgroundColor="$green-200"
borderRadius="$200"
>
like this
</Box>
</div>
<div>
<Text>Flex Container</Text>
<Box
display="flex"
gap="$200"
padding="$300"
backgroundColor="$grape-200"
borderRadius="$200"
>
<Box
padding="$200"
backgroundColor="$grape-400"
borderRadius="$100"
color="$contrast-100"
>
Item 1
</Box>
<Box
padding="$200"
backgroundColor="$grape-400"
borderRadius="$100"
color="$contrast-100"
>
Item 2
</Box>
<Box
padding="$200"
backgroundColor="$grape-400"
borderRadius="$100"
color="$contrast-100"
>
Item 3
</Box>
</Box>
</div>
<div>
<Text>Grid Container</Text>
<Box
display="grid"
padding="$300"
backgroundColor="$orange-200"
borderRadius="$200"
gap="$200"
style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
>
<Box
padding="$200"
backgroundColor="$orange-400"
borderRadius="$100"
color="$contrast-100"
>
A
</Box>
<Box
padding="$200"
backgroundColor="$orange-400"
borderRadius="$100"
color="$contrast-100"
>
B
</Box>
<Box
padding="$200"
backgroundColor="$orange-400"
borderRadius="$100"
color="$contrast-100"
>
C
</Box>
</Box>
</div>
</div>
</div>
);
}Background Color
Box 컴포넌트는 시맨틱 색상과 팔레트 색상을 모두 지원합니다.
import { Box } from '@vapor-ui/core';
export default function BoxBackground() {
return (
<div className="flex flex-wrap items-center gap-4">
<Box padding="$400" backgroundColor="$primary-200" color="$primary-100">
Primary
</Box>
<Box padding="$400" backgroundColor="$secondary-200" color="$contrast-100">
Secondary
</Box>
<Box padding="$400" backgroundColor="$success-200" color="$contrast-100">
Success
</Box>
<Box padding="$400" backgroundColor="$warning-200" color="$contrast-100">
Warning
</Box>
<Box padding="$400" backgroundColor="$danger-200" color="$contrast-100">
Danger
</Box>
<Box padding="$400" backgroundColor="$gray-200" color="$primary">
Gray 200
</Box>
<Box padding="$400" backgroundColor="$blue-500" color="$contrast">
Blue 500
</Box>
<Box padding="$400" backgroundColor="$green-300" color="$primary">
Green 300
</Box>
</div>
);
}Spacing
패딩과 마진 속성을 사용하여 요소의 내부 및 외부 여백을 조절할 수 있습니다.
import { Box } from '@vapor-ui/core';
export default function BoxSpacing() {
return (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-4">
<Box padding="$400" backgroundColor="$blue-200" borderRadius="$200">
Padding
</Box>
</div>
<div className="flex items-center gap-4">
<Box margin="$400" padding="$300" backgroundColor="$green-200" borderRadius="$200">
Margin
</Box>
</div>
<div className="flex items-center gap-4">
<Box
paddingX="$500"
paddingY="$200"
backgroundColor="$grape-100"
borderRadius="$200"
>
Horizontal Padding
</Box>
<Box
marginX="$300"
marginY="$100"
padding="$300"
backgroundColor="$grape-200"
borderRadius="$200"
>
Asymmetric Margins
</Box>
</div>
</div>
);
}Layout
플렉스박스 속성을 활용하여 다양한 레이아웃을 구성할 수 있습니다.
import { Box } from '@vapor-ui/core';
export default function BoxLayout() {
return (
<div className="flex flex-col gap-6">
<div>
<h4 className="mb-2 text-sm font-medium">Flex Direction</h4>
<div className="flex flex-col gap-4">
<Box
display="flex"
flexDirection="row"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
>
<Box padding="$200" backgroundColor="$blue-300" borderRadius="$100">
1
</Box>
<Box padding="$200" backgroundColor="$blue-300" borderRadius="$100">
2
</Box>
<Box padding="$200" backgroundColor="$blue-300" borderRadius="$100">
3
</Box>
</Box>
<Box
display="flex"
flexDirection="column"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
>
<Box padding="$200" backgroundColor="$green-300" borderRadius="$100">
A
</Box>
<Box padding="$200" backgroundColor="$green-300" borderRadius="$100">
B
</Box>
<Box padding="$200" backgroundColor="$green-300" borderRadius="$100">
C
</Box>
</Box>
</div>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Justify Content</h4>
<div className="flex flex-col gap-2">
<Box
display="flex"
justifyContent="flex-start"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Start
</Box>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Items
</Box>
</Box>
<Box
display="flex"
justifyContent="center"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Center
</Box>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Items
</Box>
</Box>
<Box
display="flex"
justifyContent="space-between"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Space
</Box>
<Box padding="$200" backgroundColor="$grape-300" borderRadius="$100">
Between
</Box>
</Box>
</div>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Align Items</h4>
<Box
display="flex"
alignItems="center"
justifyContent="space-around"
gap="$200"
padding="$300"
backgroundColor="$gray-100"
borderRadius="$200"
height="$800"
>
<Box
padding="$200"
backgroundColor="$orange-300"
borderRadius="$100"
height="$500"
>
Small
</Box>
<Box
padding="$200"
backgroundColor="$orange-300"
borderRadius="$100"
height="$600"
>
Medium
</Box>
<Box
padding="$200"
backgroundColor="$orange-300"
borderRadius="$100"
height="$700"
>
Aligned
</Box>
</Box>
</div>
</div>
);
}Dimensions
너비와 높이를 설정하거나 최소/최대 크기 제약을 적용할 수 있습니다.
import { Box } from '@vapor-ui/core';
export default function BoxDimensions() {
return (
<Box display="flex">
<div>
<div className="flex items-end gap-4">
<Box
width="$800"
height="$800"
backgroundColor="$blue-300"
borderRadius="$200"
display="flex"
alignItems="center"
justifyContent="center"
color="$contrast-100"
>
800x800
</Box>
</div>
</div>
</Box>
);
}Visual Styles
테두리 둥글기, 투명도, 텍스트 정렬 등의 시각적 속성을 제어할 수 있습니다.
import { Box } from '@vapor-ui/core';
export default function BoxVisual() {
return (
<div className="flex flex-col gap-6">
<div>
<h4 className="mb-2 text-sm font-medium">Border Radius</h4>
<div className="flex items-center gap-4">
<Box padding="$400" backgroundColor="$blue-200" borderRadius="$100">
Small Radius
</Box>
<Box padding="$400" backgroundColor="$blue-300" borderRadius="$300">
Medium Radius
</Box>
<Box padding="$400" backgroundColor="$blue-400" borderRadius="$600">
Large Radius
</Box>
<Box
padding="$400"
backgroundColor="$blue-500"
borderRadius="$900"
color="$contrast-100"
>
Extra Large
</Box>
</div>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Opacity Levels</h4>
<div className="flex items-center gap-4">
<Box
padding="$400"
backgroundColor="$green-500"
opacity="0.3"
borderRadius="$200"
>
30% Opacity
</Box>
<Box
padding="$400"
backgroundColor="$green-500"
opacity="0.6"
borderRadius="$200"
>
60% Opacity
</Box>
<Box
padding="$400"
backgroundColor="$green-500"
opacity="0.9"
borderRadius="$200"
>
90% Opacity
</Box>
<Box padding="$400" backgroundColor="$green-500" borderRadius="$200">
Full Opacity
</Box>
</div>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Text Alignment</h4>
<div className="flex flex-col gap-2">
<Box
padding="$400"
backgroundColor="$grape-100"
borderRadius="$200"
textAlign="left"
>
Left aligned text content
</Box>
<Box
padding="$400"
backgroundColor="$grape-200"
borderRadius="$200"
textAlign="center"
>
Center aligned text content
</Box>
<Box
padding="$400"
backgroundColor="$grape-300"
borderRadius="$200"
textAlign="right"
>
Right aligned text content
</Box>
</div>
</div>
<div>
<h4 className="mb-2 text-sm font-medium">Overflow Behavior</h4>
<div className="flex flex-col gap-4">
<Box
height="$800"
padding="$300"
backgroundColor="$orange-200"
borderRadius="$200"
overflow="hidden"
>
This is a long text that will be clipped when it overflows the container
bounds because overflow is set to hidden.
</Box>
<Box
height="$300"
padding="$300"
backgroundColor="$orange-300"
borderRadius="$200"
overflow="scroll"
>
This is a long text that will show scrollbars when it overflows the
container bounds because overflow is set to scroll. You can scroll to see
the full content.
</Box>
</div>
</div>
</div>
);
}Props Table
Box
Box 컴포넌트는 div HTML 요소를 기반으로 하며, Sprinkles 시스템을 통해 디자인 토큰 기반의 스타일링 속성을 제공합니다. 모든 표준 HTML div 속성도 지원합니다.
| Prop | Default | Type |
|---|---|---|
display? | block | blockinlineflexgridnone |
flexDirection? | row | rowcolumnrow-reversecolumn-reverse |
justifyContent? | flex-start | flex-startcenterflex-endspace-betweenspace-aroundspace-evenly |
alignItems? | stretch | flex-startcenterflex-endstretchbaseline |
gap? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
padding? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
paddingX? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
paddingY? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
margin? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
marginX? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
marginY? | $000 | $000$025$050$075$100$150$175$200$225$250$300$400$500$600$700$800$900 |
width? | auto | $025$050$075$100$150$175$200$225$250$300$400$500$600$700$800 |
height? | auto | $025$050$075$100$150$175$200$225$250$300$400$500$600$700$800 |
backgroundColor? | transparent | $primary-100$primary-200$secondary-100$secondary-200$success-100$success-200$warning-100$warning-200$danger-100$danger-200$hint-100$hint-200$contrast-100$contrast-200$accent-100$accent-200$normal-100$normal-200$blue-050$blue-100$blue-200$blue-300$blue-400$blue-500$blue-600$blue-700$blue-800$blue-900$cyan-050$cyan-100$cyan-200$cyan-300$cyan-400$cyan-500$cyan-600$cyan-700$cyan-800$cyan-900$grape-050$grape-100$grape-200$grape-300$grape-400$grape-500$grape-600$grape-700$grape-800$grape-900$gray-000$gray-050$gray-100$gray-200$gray-300$gray-400$gray-500$gray-600$gray-700$gray-800$gray-900$gray-950$green-050$green-100$green-200$green-300$green-400$green-500$green-600$green-700$green-800$green-900$lime-050$lime-100$lime-200$lime-300$lime-400$lime-500$lime-600$lime-700$lime-800$lime-900$orange-050$orange-100$orange-200$orange-300$orange-400$orange-500$orange-600$orange-700$orange-800$orange-900$pink-050$pink-100$pink-200$pink-300$pink-400$pink-500$pink-600$pink-700$pink-800$pink-900$red-050$red-100$red-200$red-300$red-400$red-500$red-600$red-700$red-800$red-900$violet-050$violet-100$violet-200$violet-300$violet-400$violet-500$violet-600$violet-700$violet-800$violet-900$yellow-050$yellow-100$yellow-200$yellow-300$yellow-400$yellow-500$yellow-600$yellow-700$yellow-800$yellow-900$black$white |
color? | inherit | $primary-100$primary-200$secondary-100$secondary-200$success-100$success-200$warning-100$warning-200$danger-100$danger-200$hint-100$hint-200$contrast-100$contrast-200$normal-100$normal-200 |
borderRadius? | $000 | $000$050$100$200$300$400$500$600$700$800$900 |
opacity? | 1 | 00.10.20.30.40.50.60.70.80.91 |
textAlign? | left | leftcenterrightjustify |
overflow? | visible | visiblehiddenscrollauto |