Components
Accordion
Alert Dialog
Aspect Ratio
Avatar
Badge
Bottomsheet
Breadcrumb
Button
Calendar View
Callout
Card
Carousel
Checkbox
Checkbox Group
Checkbox Cards
Combobox
Context Menu
Data List
Dialog
DataGrid
Datepicker
Dropdown Menu
File Upload
Hover Card
Icon Button
Input
Input Card Number
Input Mask
Input Number
InputOTP
Input Phone Number
Input RRN
Inset
Pagination
Popover
Progress
Radio
Radio Group
Radio Cards
Rating
Resizable
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Toast
Text Area
Text Field
Tooltip
TreeView
Components
Grid
그리드 레이아웃을 만들기 위한 컴포넌트.
<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>
API Reference
이 컴포넌트는 div 요소를 기반으로 하며 common margin props를 지원합니다.
그리드 레이아웃을 만들기 위해 다음 props를 사용하세요.
| Prop | Type | Default |
|---|---|---|
as | "div" | "span" | "div" |
asChild | boolean | No default value |
display | Responsive<"none" | "inline-grid" | "grid"> | No default value |
areas | Responsive<string> | No default value |
columns | Responsive<enum | string> | No default value |
rows | Responsive<enum | string> | No default value |
flow | Responsive<enum> | No default value |
align | Responsive<enum> | No default value |
justify | Responsive<"start" | "center" | "end" | "between"> | No default value |
gap | Responsive<enum | string> | No default value |
gapX | Responsive<enum | string> | No default value |
gapY | Responsive<enum | string> | No default value |
다음 props는 Box, Flex, Grid, Container, Section 컴포넌트 간에 공유됩니다. 레이아웃 컴포넌트에 대해 자세히 알아보려면 Layout을 참조하세요.
| Prop | Type | Default |
|---|---|---|
p | Responsive<enum | string> | No default value |
px | Responsive<enum | string> | No default value |
py | Responsive<enum | string> | No default value |
pt | Responsive<enum | string> | No default value |
pr | Responsive<enum | string> | No default value |
pb | Responsive<enum | string> | No default value |
pl | Responsive<enum | string> | No default value |
width | Responsive<string> | No default value |
minWidth | Responsive<string> | No default value |
maxWidth | Responsive<string> | No default value |
height | Responsive<string> | No default value |
minHeight | Responsive<string> | No default value |
maxHeight | Responsive<string> | No default value |
position | Responsive<enum> | No default value |
inset | Responsive<enum | string> | No default value |
top | Responsive<enum | string> | No default value |
right | Responsive<enum | string> | No default value |
bottom | Responsive<enum | string> | No default value |
left | Responsive<enum | string> | No default value |
overflow | Responsive<enum> | No default value |
overflowX | Responsive<enum> | No default value |
overflowY | Responsive<enum> | No default value |
flexBasis | Responsive<string> | No default value |
flexShrink | Responsive<enum | string> | No default value |
flexGrow | Responsive<enum | string> | No default value |
gridArea | Responsive<string> | No default value |
gridColumn | Responsive<string> | No default value |
gridColumnStart | Responsive<string> | No default value |
gridColumnEnd | Responsive<string> | No default value |
gridRow | Responsive<string> | No default value |
gridRowStart | Responsive<string> | No default value |
gridRowEnd | Responsive<string> | No default value |
Examples
Responsive
columns와 rows와 같이 Responsive로 표시된 모든 props는 breakpoint 객체를 허용합니다. 예를 들어, 다음 그리드는 1개의 컬럼으로 시작하여 중간 breakpoint부터 2개의 컬럼을 사용합니다.
<Grid columns={{ initial: "1", md: "2"}} gap="3" width="auto">
<Box height="64px">
<DecorativeBox />
</Box>
<Box height="64px">
<DecorativeBox />
</Box>
</Grid>