,
},
{
header: 'Status',
accessorKey: 'status',
cell: ({ row }) => {
const status = row.getValue('status');
return (
{status.toUpperCase()}
);
},
filterFn: customFilterFn,
},
{
header: 'Role',
accessorKey: 'role',
filterFn: customFilterFn,
},
{
header: 'Last Active',
accessorKey: 'last-active',
},
],
[],
);
const [columnFilters, setColumnFilters] = useState([]);
const table = useReactTable({
data: datas,
columns,
state: { columnFilters },
enableRowSelection: true,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onColumnFiltersChange: setColumnFilters,
});
return (
출석부
table.getColumn('name')?.setFilterValue(value)
}
/>
{
table.getColumn('status')?.setFilterValue(value);
}}
content={
<>
ActiveInactive
}
/>
table.getColumn('role')?.setFilterValue(value)
}
content={
<>
DesignerDeveloper
}
/>
col.getIsVisible())
.map((col) => col.id)}
content={table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => (
column.toggleVisibility()}
>
{column.id}
))}
/>
{table.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => (
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
))}
))}
{table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => {
return (
{row.getVisibleCells().map((cell) => (
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
))}
);
})
) : (
검색 결과가 없습니다.
)}
table.setPageIndex(page - 1)}
>
table.setPageSize(Number(value))}
>
{(value) => `${value}개씩 보기`}
{[5, 10, 20, 30, 40, 50].map((pageSize) => (
{pageSize}
))}
);
}
type Data = {
name: string;
status: 'active' | 'inactive';
role: string;
'last-active': string;
};
const datas: Data[] = [
{ name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
{ name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
{ name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
{ name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
{ name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
{ name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
{ name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
{ name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
{ name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
{ name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
{ name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
{ name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
{ name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
{ name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
{ name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
{ name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
{ name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
{ name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
{ name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
{ name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
];
const activeness: Record = {
active: 'success',
inactive: 'hint',
};
/* -----------------------------------------------------------------------------------------------*/
interface FilterSelectProps extends React.ComponentProps {
triggerLabel: string;
content: React.ReactNode;
}
const FilterSelect = ({ content, triggerLabel, ...props }: FilterSelectProps) => {
return (
}
style={{ width: 'unset' }}
>
{triggerLabel}
}>
{content}
);
};
```
# Avatar
URL: /docs/components/avatar
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/avatar.mdx
Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.
***
title: 'Avatar'
site\_name: 'Avatar - Vapor Core'
description: 'Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.'
-----------------------------------------------------------
```tsx
import { Avatar } from '@vapor-ui/core';
import { VAPOR_LOGO_URL } from '~/constants/image-urls';
export default function DefaultAvatar() {
return ;
}
```
## Property
***
### Shape
Avatar의 모양을 설정합니다.
```tsx
import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';
import { VAPOR_LOGO_URL } from '~/constants/image-urls';
export default function AvatarShape() {
return (
square
circle
);
}
```
### Size
Avatar의 크기를 설정합니다.
```tsx
import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';
import { VAPOR_LOGO_URL } from '~/constants/image-urls';
export default function AvatarSize() {
return (
sm
md
lg
xl
);
}
```
## Examples
***
### Fallback
이미지가 없거나 로드에 실패한 경우, alt 텍스트의 첫 글자가 자동으로 표시됩니다. 배경색은 alt 문자열을 기반으로 결정됩니다.
```tsx
import { Avatar, HStack } from '@vapor-ui/core';
export default function AvatarFallback() {
return (
);
}
```
### Custom Fallback
FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 표시합니다.
```tsx
import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';
export default function AvatarCustomFallback() {
return (
auto initial
custom text
JD
);
}
```
## Props Table
***
### Avatar.Root
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | 아바타 크기 |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| **alt** | `string` | - | 대체 텍스트, 폴백 이니셜 생성에도 사용 |
| `shape` | `circle`, `square` | `square` | 아바타 모서리 형태 |
| `src` | `string` | - | 이미지 소스 URL |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `delay` | `number` | - | 폴백 표시 전 지연 시간 (밀리초) |
#### Avatar.ImagePrimitive
| Prop | Type | Default | Description |
| ----------------------- | -------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `onLoadingStatusChange` | `(status: ImageLoadingStatus) => void` | - | 로딩 상태가 변경될 때 호출되는 콜백 |
#### Avatar.FallbackPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Badge
URL: /docs/components/badge
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/badge.mdx
Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.
***
title: 'Badge'
site\_name: 'Badge - Vapor Core'
description: 'Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.'
--------------------------------------------------------
```tsx
import { Badge } from '@vapor-ui/core';
export default function DefaultBadge() {
return New;
}
```
## Property
***
### ColorPalette
Badge의 색상을 설정합니다.
```tsx
import { Badge, HStack, Text, VStack } from '@vapor-ui/core';
export default function BadgeColor() {
return (
primary
New
hint
New
danger
New
success
New
warning
New
contrast
New
);
}
```
### Shape
Badge의 모양을 설정합니다.
```tsx
import { Badge, HStack, Text, VStack } from '@vapor-ui/core';
export default function BadgeShape() {
return (
square
New
pill
New
);
}
```
### Size
Badge의 크기를 설정합니다.
```tsx
import { Badge, HStack, Text, VStack } from '@vapor-ui/core';
export default function BadgeSize() {
return (
sm
New
md
New
lg
New
);
}
```
## Props Table
***
### Badge
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg` | `md` | 뱃지 크기 |
| `shape` | `square`, `pill` | `square` | 뱃지 모서리 형태 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `colorPalette` | `primary`, `success`, `warning`, `danger`, `hint`, `contrast` | `primary` | 뱃지 색상 |
# Breadcrumb
URL: /docs/components/breadcrumb
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/breadcrumb.mdx
사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.
***
title: 'Breadcrumb'
site\_name: 'Breadcrumb - Vapor Core'
description: '사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.'
-----------------------------------------------------------------------------
```tsx
import { Breadcrumb } from '@vapor-ui/core';
export default function DefaultBreadcrumb() {
return (
HomeProducts
Details
);
}
```
## Examples
***
### With Ellipsis
긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다.
```tsx
import { Breadcrumb } from '@vapor-ui/core';
export default function BreadcrumbEllipsis() {
return (
HomeCategorySubcategory
Current Page
);
}
```
### Composition Pattern
Breadcrumb 컴포넌트의 다양한 구성 패턴입니다.
```tsx
import { Breadcrumb, Text, VStack } from '@vapor-ui/core';
import { ChevronRightOutlineIcon, HomeIcon } from '@vapor-ui/icons';
export default function BreadcrumbComposition() {
return (
Basic
HomeProductsDetails
Custom Separator
HomeProductsDetails
With Icon
Home
DashboardSettings
);
}
```
## Property
***
### Current
현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다.
```tsx
import { Breadcrumb, Text, VStack } from '@vapor-ui/core';
export default function BreadcrumbCurrent() {
return (
Normal Links
HomeProductsDetails
With Current Page
HomeProducts
Details
);
}
```
### Size
Breadcrumb의 크기를 설정합니다.
```tsx
import { Breadcrumb, HStack, Text, VStack } from '@vapor-ui/core';
export default function BreadcrumbSize() {
return (
sm
HomeProducts
Details
md
HomeProducts
Details
lg
HomeProducts
Details
xl
HomeProducts
Details
);
}
```
## Props Table
***
### Breadcrumb.Root
| Prop | Type | Default | Description |
| -------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | 브레드크럼 크기 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Breadcrumb.RootPrimitive
| Prop | Type | Default | Description |
| -------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | 브레드크럼 크기 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Breadcrumb.ListPrimitive
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Breadcrumb.Item
| Prop | Type | Default | Description |
| --------- | --------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `current` | `false`, `true` | - | 현재 페이지 여부 |
#### Breadcrumb.ItemPrimitive
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Breadcrumb.LinkPrimitive
| Prop | Type | Default | Description |
| --------- | --------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `current` | `false`, `true` | `false` | 현재 페이지 여부 |
### Breadcrumb.Separator
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Breadcrumb.Ellipsis
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Breadcrumb.EllipsisPrimitive
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Button
URL: /docs/components/button
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/button.mdx
Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.
***
title: 'Button'
site\_name: 'Button - Vapor Core'
description: 'Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.'
----------------------------------------------------------
```tsx
import { Button } from '@vapor-ui/core';
export default function DefaultButton() {
return ;
}
```
## Property
***
### Variant
Button의 시각적 스타일을 설정합니다.
```tsx
import { Button, HStack, Text, VStack } from '@vapor-ui/core';
export default function ButtonVariant() {
return (
fill
outline
ghost
);
}
```
### ColorPalette
Button의 역할에 따른 색상을 설정합니다.
```tsx
import { Button, HStack, Text, VStack } from '@vapor-ui/core';
export default function ButtonColor() {
return (
primary
secondary
success
warning
danger
contrast
);
}
```
### Disabled
Button의 비활성화 상태를 설정합니다.
```tsx
import { Button, HStack, Text, VStack } from '@vapor-ui/core';
export default function ButtonDisabled() {
return (
enabled
disabled
);
}
```
### Size
Button의 크기를 설정합니다.
```tsx
import { Button, HStack, Text, VStack } from '@vapor-ui/core';
export default function ButtonSize() {
return (
sm
md
lg
xl
);
}
```
## Examples
***
### Button with Icon
Button의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다.
```tsx
import { Button, HStack } from '@vapor-ui/core';
import { CheckCircleIcon, ChevronRightOutlineIcon } from '@vapor-ui/icons';
export default function ButtonWithIcon() {
return (
);
}
```
## Props Table
***
### Button
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | 버튼 크기 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | 버튼 색상 |
| `variant` | `outline`, `fill`, `ghost` | `fill` | 버튼 스타일 (fill: 채움, outline: 테두리, ghost: 투명) |
# Callout
URL: /docs/components/callout
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/callout.mdx
Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.
***
title: 'Callout'
site\_name: 'Callout - Vapor Core'
description: 'Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.'
------------------------------------------------------------------
```tsx
import { Callout } from '@vapor-ui/core';
import { InfoCircleOutlineIcon } from '@vapor-ui/icons';
export default function DefaultCallout() {
return (
Your changes have been saved successfully.
);
}
```
## Examples
***
### Callout with Icon
Callout의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다.
```tsx
import { Callout, VStack } from '@vapor-ui/core';
import { CheckCircleIcon, HeartIcon, InfoCircleOutlineIcon } from '@vapor-ui/icons';
export default function CalloutWithIcon() {
return (
Task completed successfully
Please review your settings
New notification available
);
}
```
## Property
***
### ColorPalette
Callout의 역할에 따른 색상을 설정합니다.
```tsx
import { Callout, Text, VStack } from '@vapor-ui/core';
export default function CalloutColor() {
return (
primary
Your changes have been saved successfully.
success
Your changes have been saved successfully.
warning
Your changes have been saved successfully.
danger
Your changes have been saved successfully.
hint
Your changes have been saved successfully.
contrast
Your changes have been saved successfully.
);
}
```
## Props Table
***
### Callout.Root
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 엘리먼트를 다른 태그로 교체하거나 다른 컴포넌트와 조합할 수 있습니다.
`ReactElement` 또는 렌더링할 엘리먼트를 반환하는 함수를 받습니다. |
| `colorPalette` | `primary`, `success`, `warning`, `danger`, `hint`, `contrast` | `primary` | 색상 스킴을 제어합니다 |
### Callout.Icon
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 엘리먼트를 다른 태그로 교체하거나 다른 컴포넌트와 조합할 수 있습니다.
`ReactElement` 또는 렌더링할 엘리먼트를 반환하는 함수를 받습니다. |
# Card
URL: /docs/components/card
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/card.mdx
Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.
***
title: 'Card'
site\_name: 'Card - Vapor Core'
description: 'Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.'
--------------------------------------------------------------
```tsx
import { Button, Card, HStack, Text, VStack } from '@vapor-ui/core';
export default function DefaultCard() {
return (
} typography="heading5">
Project Settings
Configure your project settings and preferences.
);
}
```
## Examples
***
### Layout
상황에 따라, 일부 영역을 생략하여 Card를 구성할 수 있습니다.
```tsx
import { Card, HStack, Text, VStack } from '@vapor-ui/core';
export default function CardLayout() {
return (
Body only
A simple card with content only.
Body + Footer
Card content goes here.
Updated 2 hours ago
Header + Body
} typography="heading6">
Notifications
You have 3 unread messages.
);
}
```
## Props Table
***
### Card.Root
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Card.Header
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Card.Body
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Card.Footer
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Checkbox
URL: /docs/components/checkbox
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/checkbox.mdx
Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.
***
title: 'Checkbox'
site\_name: 'Checkbox - Vapor Core'
description: 'Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.'
-----------------------------------------------------------
```tsx
import { Checkbox, HStack, Text } from '@vapor-ui/core';
export default function DefaultCheckbox() {
return (
} typography="body2">
I agree to the terms and conditions
);
}
```
## Property
***
### Indeterminate
Checkbox의 혼합 상태 여부를 설정합니다.
```tsx
import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';
export default function CheckboxIndeterminate() {
return (
unchecked
} typography="body2">
Select all
indeterminate
} typography="body2">
Select all
checked
} typography="body2">
Select all
);
}
```
### Disabled
Checkbox의 비활성화 상태를 설정합니다.
```tsx
import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';
export default function CheckboxDisabled() {
return (
disabled
} typography="body2">
Remember me
disabled checked
} typography="body2">
Remember me
);
}
```
### Invalid
Checkbox의 유효하지 않음 상태를 설정합니다.
```tsx
import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';
export default function CheckboxInvalid() {
return (
invalid
} typography="body2">
Accept terms
invalid checked
} typography="body2">
Accept terms
);
}
```
### Read Only
Checkbox의 읽기 전용 상태를 설정합니다.
```tsx
import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';
export default function CheckboxReadOnly() {
return (
unchecked
checked
indeterminate
);
}
```
### Size
Checkbox의 크기를 설정합니다.
```tsx
import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';
export default function CheckboxSize() {
return (
md
} typography="body2">
Remember me
lg
} typography="body2">
Remember me
);
}
```
## Props Table
***
### Checkbox.Root
| Prop | Type | Default | Description |
| ----------------- | ------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
| `size` | `md`, `lg` | `md` | 체크박스 크기 |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `id` | `string` | - | input 요소의 고유 식별자 |
| `name` | `string` | `undefined` | 폼 제출 시 필드를 식별하는 이름 |
| `defaultChecked` | `false`, `true` | `false` | 초기 상태에서 체크박스가 선택되었는지 여부
제어되는 체크박스를 렌더링하려면 대신 `checked` 속성을 사용하십시오. |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `value` | `string` | - | 폼 제출 시 체크박스의 값 |
| `checked` | `false`, `true` | `undefined` | 체크박스가 현재 선택되었는지 여부
제어되지 않는 체크박스를 렌더링하려면 대신 `defaultChecked` 프로퍼티를 사용하십시오. |
| `readOnly` | `false`, `true` | `false` | 사용자가 체크박스를 선택하거나 선택 해제하지 못하도록 할지 여부 |
| `required` | `false`, `true` | `false` | 사용자가 폼을 제출하기 전에 체크박스를 선택해야 하는지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `onCheckedChange` | `(checked: boolean, eventDetails: Checkbox.Root.ChangeEventDetails) => void` | - | 체크박스가 선택되거나 해제될 때 호출되는 이벤트 핸들러 |
| `indeterminate` | `false`, `true` | `false` | 체크박스가 indeterminate 상태인지 여부: 선택되었거나 선택되지 않음. |
| `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 `<input>` 요소에 접근하기 위한 ref |
| `parent` | `false`, `true` | `false` | 체크박스가 하위 체크박스 그룹을 제어하는지 여부
[Checkbox Group](https://base-ui.com/react/components/checkbox-group)에서 사용해야 합니다. |
| `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부 렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. |
| `invalid` | `false`, `true` | `false` | 유효성 검사 실패 상태 |
### Checkbox.IndicatorPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 체크박스가 선택되지 않은 경우에도 Indicator를 DOM에 유지할지 여부 |
# Collapsible
URL: /docs/components/collapsible
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/collapsible.mdx
Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.
***
title: 'Collapsible'
site\_name: 'Collapsible - Vapor Core'
description: 'Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.'
----------------------------------------------------------------------------------------
```tsx
import { Collapsible, Text, VStack } from '@vapor-ui/core';
import { ChevronRightOutlineIcon } from '@vapor-ui/icons';
export default function DefaultCollapsible() {
return (
Settings
AccountNotificationsPrivacy
);
}
```
## Property
***
### Open State
`defaultOpen`으로 초기 열림 상태를 설정하거나, `open`과 `onOpenChange`로 제어 모드로 사용합니다.
```tsx
import { useState } from 'react';
import { Button, Collapsible, HStack, Text, VStack } from '@vapor-ui/core';
export default function CollapsibleOpenState() {
const [open, setOpen] = useState(true);
return (
defaultOpen
FAQ Section
This panel starts open and manages its own state.
controlled
Release Notes
This panel is controlled externally via state.
);
}
```
### Disabled
Collapsible의 비활성화 상태를 설정합니다.
```tsx
import { Collapsible, Text, VStack } from '@vapor-ui/core';
import { ChevronRightOutlineIcon } from '@vapor-ui/icons';
export default function CollapsibleDisabled() {
return (
enabled
Advanced Options
Configure advanced settings for your project.
disabled
Advanced Options
Configure advanced settings for your project.
);
}
```
### Keep Mounted
`keepMounted`를 사용하면 패널이 닫힌 상태에서도 DOM에 유지됩니다.
```tsx
import { Collapsible, HStack, Text, VStack } from '@vapor-ui/core';
import { ChevronRightOutlineIcon } from '@vapor-ui/icons';
export default function CollapsibleKeepMounted() {
return (
default
Help Section
Removed from DOM when closed.
keepMounted
Help Section
Stays in DOM when closed.
);
}
```
## Props Table
***
### Collapsible.Root
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `open` | `false`, `true` | - | collapsible 패널의 현재 열림 상태
비제어 컴포넌트로 사용하려면 `defaultOpen` prop을 사용하세요. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | collapsible 패널의 초기 열림 상태 (비제어 컴포넌트)
제어 컴포넌트로 사용하려면 `open` prop을 사용하세요. |
| `onOpenChange` | `(open: boolean, eventDetails: Collapsible.Root.ChangeEventDetails) => void` | - | 패널이 열리거나 닫힐 때 호출되는 이벤트 핸들러 |
### Collapsible.Trigger
| Prop | Type | Default | Description |
| -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부 렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. |
### Collapsible.Panel
| Prop | Type | Default | Description |
| ------------------ | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `hiddenUntilFound` | `false`, `true` | `false` | 체크박스가 현재 선택되었는지 여부
제어되지 않는 체크박스를 렌더링하려면 대신 `defaultChecked` 프로퍼티를 사용하십시오 |
| `keepMounted` | `false`, `true` | `false` | 요소가 숨겨져 있는 동안 DOM에 유지할지 여부입니다. 이 속성은 `hiddenUntilFound`가 사용될 때 무시됩니다. |
# Dialog
URL: /docs/components/dialog
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/dialog.mdx
Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.
***
title: 'Dialog'
site\_name: 'Dialog - Vapor Core'
description: 'Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.'
--------------------------------------------------------------------
```tsx
import { Button, Dialog } from '@vapor-ui/core';
export default function DefaultDialog() {
return (
}>클릭
알림
여기에 다이얼로그 본문 내용이 들어갑니다.
확인} />
);
}
```
## Property
***
### Size
Dialog의 크기를 설정합니다.
```tsx
import { Button, Dialog, HStack, Text, VStack } from '@vapor-ui/core';
export default function DialogSize() {
return (
md
Medium Dialog} />
Medium SizeMedium 크기의 다이얼로그입니다.취소} />
확인} />
lg
Large Dialog} />
Large SizeLarge 크기의 다이얼로그입니다.취소} />
확인} />
xl
Extra Large Dialog} />
Extra Large Size
Extra Large 크기의 다이얼로그입니다.
취소} />
확인} />
);
}
```
### Modal Behavior
Dialog의 모달 동작을 설정합니다.
```tsx
import { Button, Dialog, HStack, Text, VStack } from '@vapor-ui/core';
export default function DialogModal() {
return (
modal
Modal Dialog} />
Modal Dialog
포커스가 다이얼로그 내부에 제한됩니다.
확인} />
non-modal
Non-Modal Dialog} />
Non-Modal Dialog
배경의 다른 요소들과 상호작용할 수 있습니다.
확인} />
);
}
```
## Examples
***
### Custom Usage
Dialog 컴포넌트의 다양한 구성 패턴입니다.
```tsx
import { Button, Dialog } from '@vapor-ui/core';
export default function Flexible() {
return (
확인 다이얼로그} />
작업 확인
이 작업을 진행하시겠습니까? 이 작업은 되돌릴 수 없습니다.
취소} />
삭제} />
);
}
```
## Props Table
***
### Dialog.Root
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `open` | `false`, `true` | - | Dialog가 현재 열려 있는지 여부. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | Dialog가 처음에 열려 있는지 여부입니다.
제어되는 Dialog를 렌더링하려면 대신 `open` prop을 사용하세요. |
| `modal` | `false`, `true`, `trap-focus` | `true` | 대화 상자를 열었을 때 모드 상태로 전환되는지 여부를 결정합니다. - 'true': 사용자 상호작용은 대화 상자에만 제한됩니다: 포커스가 갇히고, 문서 페이지 스크롤이 잠기고, 외부 요소의 포인터 상호작용이 비활성화됩니다. - 'false': 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다. - 'trap 포커스': 포커스는 대화 상자 안에 갇혀 있지만, 문서 페이지 스크롤은 잠겨 있지 않고 외부의 포인터 상호작용은 활성화된 상태로 유지됩니다. |
| `onOpenChange` | `(open: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => void` | - | 대화 상자를 열거나 닫을 때 호출되는 이벤트 핸들러입니다. |
| `onOpenChangeComplete` | `(open: boolean) => void` | - | 대화 상자가 열리거나 닫힐 때 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. |
| `actionsRef` | `RefObject` | - | 명령적 행동에 대한 참조. - '언마운트': 지정하면 대화 상자를 닫았을 때 언마운트되지 않습니다. 대신, '언마운트' 기능을 호출하여 수동으로 대화 상자를 언마운트해야 합니다. 대화 상자의 애니메이션이 외부 라이브러리에 의해 제어될 때 유용합니다. |
| `size` | `md`, `lg`, `xl` | `md` | Dialog 크기 |
### Dialog.Popup
| Prop | Type | Default | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 대화 상자를 열 때 집중할 요소를 결정합니다. - 'false': 초점을 움직이지 마세요. - 'true': 기본 동작(첫 번째 탭 가능 요소 또는 팝업)에 따라 초점을 이동합니다. - 'RefObject': 초점을 참조 요소로 이동합니다. - 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다. 요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 대화 상자를 닫을 때 집중할 요소를 결정합니다. - 'false': 초점을 움직이지 마세요. - 'true': 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다. - 'RefObject': 초점을 참조 요소로 이동합니다. - 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다. 요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. |
| `portalElement` | `ReactElement` | - | |
| `overlayElement` | `ReactElement` | - | |
#### Dialog.PortalPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 상위 요소입니다. |
| `keepMounted` | `false`, `true` | `false` | 포털이 숨겨져 있는 동안 DOM에 유지할지 여부입니다. |
#### Dialog.OverlayPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `forceRender` | `false`, `true` | `false` | 중첩되어 있을 때도 백드롭이 강제로 렌더링되는지 여부입니다. |
#### Dialog.PopupPrimitive
| Prop | Type | Default | Description |
| -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 대화 상자를 열 때 집중할 요소를 결정합니다. - 'false': 초점을 움직이지 마세요. - 'true': 기본 동작(첫 번째 탭 가능 요소 또는 팝업)에 따라 초점을 이동합니다. - 'RefObject': 초점을 참조 요소로 이동합니다. - 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다. 요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 대화 상자를 닫을 때 집중할 요소를 결정합니다. - 'false': 초점을 움직이지 마세요. - 'true': 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다. - 'RefObject': 초점을 참조 요소로 이동합니다. - 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다. 요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. |
### Dialog.Trigger
| Prop | Type | Default | Description |
| -------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `true` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다. 렌더링된 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. |
### Dialog.Close
| Prop | Type | Default | Description |
| -------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `true` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다. 렌더링된 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. |
### Dialog.Title
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Dialog.Description
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Dialog.Header
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Dialog.Body
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Dialog.Footer
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Field
URL: /docs/components/field
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/field.mdx
Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.
***
title: Field
site\_name: Field - Vapor Core
description: Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.
---------------------------------------------------------------------------
```tsx
'use client';
import { Field, TextInput } from '@vapor-ui/core';
export default function DefaultField() {
return (
Email
We'll never share your email.
);
}
```
## Examples
***
### With Description
Field에 대한 추가 설명을 표시합니다.
```tsx
'use client';
import { Field, TextInput, VStack } from '@vapor-ui/core';
export default function FieldDescription() {
return (
Username
Username
This will be your public display name.
);
}
```
### Error and Success
`Field.Error`와 `Field.Success`를 사용하여 유효성 검사 결과를 표시합니다.
```tsx
'use client';
import { Field, TextInput, VStack } from '@vapor-ui/core';
export default function FieldError() {
return (
Email
Please enter a valid email address.
Email
Email is valid.
);
}
```
### Required
필수 Field와 선택 Field를 구분하여 표시합니다.
```tsx
'use client';
import { Field, Text, TextInput, VStack } from '@vapor-ui/core';
export default function FieldRequired() {
return (
필수 입력 필드 *
이 필드는 반드시 입력해야 하는 필수 항목입니다.
이 필드는 필수 입력 항목입니다.입력이 완료되었습니다.
{/* Optional Field */}
선택 입력 필드{' '}
(선택사항)
이 필드는 선택적으로 입력할 수 있습니다.
);
}
```
### Disabled
disabled 속성을 사용하여 비활성화된 Field를 만들 수 있습니다.
```tsx
'use client';
import { Field, Text, TextInput, VStack } from '@vapor-ui/core';
export default function FieldDisabled() {
return (
enabled
Email
Enter your email address.
disabled
Email
Enter your email address.
);
}
```
### With RadioGroup
RadioGroup과 Field를 함께 사용합니다. `Field.Item`을 사용하여 각 Radio 옵션을 라벨과 함께 그룹화할 수 있습니다.
```tsx
'use client';
import { Field, Radio, RadioGroup, VStack } from '@vapor-ui/core';
export default function FieldRadioGroup() {
return (
성별남성여성기타개인정보 보호를 위해 선택사항입니다.
);
}
```
### With Form Elements
TextInput, Checkbox, Switch, Select 등 다양한 폼 요소와 함께 사용합니다.
```tsx
'use client';
import { Checkbox, Field, Select, Switch, TextInput, VStack } from '@vapor-ui/core';
export default function FieldWithInputs() {
return (
Email
Your primary contact email.
Subscribe to newsletter
Get the latest updates in your inbox.
Push notifications
Receive alerts on your device.
국가
{countries.map((country) => (
{country.label}
))}
Select your country of residence.
);
}
const countries = [
{ label: '대한민국', value: 'kr' },
{ label: '미국', value: 'us' },
{ label: '일본', value: 'jp' },
{ label: '중국', value: 'cn' },
];
```
## Property
***
### Validation
`validationMode`를 통해 유효성 검사 타이밍을 설정합니다. `match` prop으로 특정 에러 타입에 대한 메시지를 표시합니다.
```tsx
'use client';
import { Field, TextInput, VStack } from '@vapor-ui/core';
export default function FieldValidation() {
return (
Email
Validated when you leave the field.Email is required.Please enter a valid email.Email looks good.
Password
Validated as you type. Minimum 8 characters.Password is required.Password must be at least 8 characters.Password is strong.
);
}
```
### Disabled
Field의 비활성화 상태를 설정합니다.
```tsx
'use client';
import { Field, Text, TextInput, VStack } from '@vapor-ui/core';
export default function FieldDisabled() {
return (
enabled
Email
Enter your email address.
disabled
Email
Enter your email address.
);
}
```
## Props Table
***
### Field.Root
| Prop | Type | Default | Description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 `<Field.Control>` 컴포넌트의 `name` prop보다 우선합니다. |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 무시할지 여부 `<Field.Control>` 컴포넌트의 `disabled` prop보다 우선합니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `validate` | `(value: unknown, formValues: Record) => string \| string[] \| Promise \| null` | - | 커스텀 유효성 검사 함수 값이 유효하지 않으면 에러 메시지 문자열 또는 문자열 배열을 반환하고, 유효하면 `null`을 반환합니다. |
| `validationMode` | `onSubmit`, `onBlur`, `onChange` | `onSubmit` | 필드 유효성 검사 시점
- **onSubmit**: 폼 제출 시 검사 (기본값) - **onBlur**: 컨트롤이 포커스를 잃을 때 검사 - **onChange**: 컨트롤 값이 변경될 때마다 검사 |
| `validationDebounceTime` | `number` | `0` | `validationMode="onChange"` 사용 시 `validate` 콜백 사이의 대기 시간 (밀리초) |
| `invalid` | `false`, `true` | - | 필드를 강제로 유효하지 않은 상태로 표시할지 여부 |
### Field.Label
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Field.Description
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Field.Error
| Prop | Type | Default | Description |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `match` | `false`, `true`, `badInput`, `customError`, `patternMismatch`, `rangeOverflow`, `rangeUnderflow`, `stepMismatch`, `tooLong`, `tooShort`, `typeMismatch`, `valueMissing` | - | 특정 유효성 검사 상태에 대한 오류 메시지를 표시할지 여부
- **false**: 모든 오류 메시지를 표시 - **true**: 모든 오류 메시지를 숨김 - **기타 문자열**: 해당 유효성 검사 상태에 대한 오류 메시지만 표시 |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Field.Success
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `match` | `false`, `true`, `valid` | - | 성공 메시지를 표시할지 여부
- **false**: 모든 성공 메시지를 표시 - **true**: 모든 성공 메시지를 숨김 - **valid**: 필드가 유효한 상태일 때만 성공 메시지를 표시 |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Field.Item
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `children` | `ReactNode` | - | Field.Item 내부에 렌더링될 콘텐츠. 일반적으로 Checkbox, Radio, Switch와 Field.Label을 포함합니다. |
# FloatingBar
URL: /docs/components/floating-bar
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/floating-bar.mdx
FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.
***
title: 'FloatingBar'
site\_name: 'FloatingBar - Vapor Core'
description: 'FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.'
---------------------------------------------------------
```tsx
import { FloatingBar } from '@vapor-ui/core';
export default function DefaultFloatingBar() {
return (
Open Floating BarThis is the floating bar content.
);
}
```
## Examples
***
### Actions
FloatingBar는 다양한 액션 요소를 담을 수 있습니다.
```tsx
import { Box, Button, FloatingBar } from '@vapor-ui/core';
export default function FloatingBarWithActions() {
return (
}>Open FloatingBar
);
}
```
### Controlled
FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리할 수 있습니다.
```tsx
import { useState } from 'react';
import {
Badge,
Box,
Button,
Checkbox,
Field,
FloatingBar,
IconButton,
Text,
VStack,
} from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
const options = [
{ id: 'item1', label: 'First Item', defaultChecked: false },
{ id: 'item2', label: 'Second Item', defaultChecked: false },
{ id: 'item3', label: 'Third Item', defaultChecked: false },
];
export default function FloatingBarControlled() {
const [selectedItems, setSelectedItems] = useState(() =>
Object.fromEntries(options.map((option) => [option.id, option.defaultChecked])),
);
const selectedCount = Object.values(selectedItems).filter(Boolean).length;
const [open, setOpen] = useState(selectedCount > 0);
const handleItemChange = (itemId: string, isChecked: boolean) => {
setSelectedItems((prev) => {
const newSelectedItems = { ...prev, [itemId]: isChecked };
const newSelectedCount = Object.values(newSelectedItems).filter(Boolean).length;
setOpen(newSelectedCount > 0);
return newSelectedItems;
});
};
const handleSelectAll = () => {
setSelectedItems(Object.fromEntries(options.map((option) => [option.id, true])));
setOpen(true);
};
const handleClearAll = () => {
setSelectedItems(Object.fromEntries(options.map((option) => [option.id, false])));
setOpen(false);
};
return (
<>
} $css={{ marginBottom: '$200' }}>
Select options below to see the FloatingBar.
{options.map((option) => (
handleItemChange(option.id, checked)}
/>
{option.label}
))}
{selectedCount} Selected
}
>
);
}
```
## Props Table
***
### FloatingBar.Root
| Prop | Type | Default | Description |
| -------------- | --------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------ |
| `open` | `boolean` | `undefined` | FloatingBar의 열림 상태를 제어합니다. 이 prop이 제공되면 컴포넌트가 제어 모드로 동작합니다. |
| `defaultOpen` | `boolean` | `false` | FloatingBar의 초기 열림 상태를 설정합니다. 비제어 모드에서만 사용됩니다. |
| `onOpenChange` | `(open: boolean, event?: Event, reason?: string) => void` | `undefined` | FloatingBar의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. open 상태, 이벤트, 그리고 변경 이유를 인자로 받습니다. |
| `modal` | `boolean`, `{ trapFocus?: boolean }` | `true` | FloatingBar가 모달 형태로 동작할지 여부를 설정합니다. true일 때 배경을 클릭하면 FloatingBar가 닫히고 포커스 트랩이 적용됩니다. |
| `openOnHover` | `boolean` | `false` | 마우스 호버 시 FloatingBar를 열지 여부를 설정합니다. |
| `delay` | `number`, `{ open?: number; close?: number }` | `0` | FloatingBar 열기/닫기 지연 시간을 밀리초 단위로 설정합니다. |
### FloatingBar.Trigger
| Prop | Type | Default | Description |
| ---------- | ---------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- |
| `render` | `React.ReactElement`, `(props: TriggerProps, state: TriggerState) => React.ReactElement` | `undefined` | 트리거 요소를 렌더링하는 함수 또는 컴포넌트입니다. 함수로 제공될 경우 props와 state를 인자로 받습니다. |
| `disabled` | `boolean` | `false` | 트리거 요소를 비활성화할지 여부를 설정합니다. |
### FloatingBar.Close
| Prop | Type | Default | Description |
| -------- | ----------------------------------------------------------------- | ----------- | --------------------------- |
| `render` | `React.ReactElement`, `(props: CloseProps) => React.ReactElement` | `undefined` | 닫기 버튼을 렌더링하는 함수 또는 컴포넌트입니다. |
### FloatingBar.Popup
| Prop | Type | Default | Description |
| ------------------- | -------------------- | ----------- | ------------------------------------------------------------------------- |
| `portalElement` | `React.ReactElement` | `undefined` | Portal 컴포넌트에 전달될 React Element입니다. FloatingBar가 렌더링될 위치와 관련된 설정을 제어합니다. |
| `positionerElement` | `React.ReactElement` | `undefined` | Positioner 컴포넌트에 전달될 React Element입니다. FloatingBar의 위치와 정렬에 관한 설정을 제어합니다. |
| `className` | `string` | `undefined` | FloatingBar 컨텐츠에 적용할 CSS 클래스명입니다. |
### FloatingBar.PortalPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------------ | --------------- | ---------------------------------------------------------------------- |
| `container` | `HTMLElement`, `() => HTMLElement`, `null` | `document.body` | FloatingBar가 렌더링될 컨테이너 요소를 지정합니다. null을 전달하면 포탈을 사용하지 않고 인라인으로 렌더링합니다. |
| `keepMounted` | `boolean` | `false` | FloatingBar가 닫혀있을 때도 DOM에 마운트된 상태를 유지할지 여부를 설정합니다. |
### FloatingBar.PositionerPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------------------------------------------------------ | ----------- | ---------------------------------------- |
| `className` | `string` | `undefined` | FloatingBar Positioner에 적용할 CSS 클래스명입니다. |
| `style` | `CSSProperties` | `undefined` | FloatingBar Positioner에 적용할 인라인 스타일입니다. |
| `render` | `React.ReactElement`, `(props: PopupProps, state: PopupState) => React.ReactElement` | `undefined` | Positioner 요소를 렌더링하는 함수 또는 컴포넌트입니다. |
### FloatingBar.PopupPrimitive
| Prop | Type | Default | Description |
| ------------------- | -------------------- | ----------- | ------------------------------------------------------------------------- |
| `portalElement` | `React.ReactElement` | `undefined` | Portal 컴포넌트에 전달될 React Element입니다. FloatingBar가 렌더링될 위치와 관련된 설정을 제어합니다. |
| `positionerElement` | `React.ReactElement` | `undefined` | Positioner 컴포넌트에 전달될 React Element입니다. FloatingBar의 위치와 정렬에 관한 설정을 제어합니다. |
| `className` | `string` | `undefined` | FloatingBar 컨텐츠에 적용할 CSS 클래스명입니다. |
# Form
URL: /docs/components/form
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/form.mdx
Form은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다.
***
title: 'Form'
site\_name: 'Form - Vapor Core'
description: 'Form은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다.'
---------------------------------------------------------
```tsx
'use client';
import { Button, Field, Form, TextInput, VStack } from '@vapor-ui/core';
export default function DefaultForm() {
return (
);
}
```
## Examples
***
### Validation
HTML5 기본 유효성 검사를 활용하여 폼 필드를 검증합니다.
```tsx
'use client';
import { Button, Field, Form, TextInput, VStack } from '@vapor-ui/core';
export default function FormValidation() {
return (
);
}
```
### With Field Components
다양한 입력 컴포넌트와 Field를 조합하여 완성된 폼을 구성합니다.
```tsx
'use client';
import { Button, Checkbox, Field, Form, HStack, Select, TextInput, VStack } from '@vapor-ui/core';
export default function FormWithField() {
return (
);
}
```
## Props Table
***
### Form
> ⚠️ Spec file not found: `form.json`
# IconButton
URL: /docs/components/icon-button
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/icon-button.mdx
IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.
***
title: 'IconButton'
site\_name: 'IconButton - Vapor Core'
description: 'IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.'
--------------------------------------------------------------------------
```tsx
import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function DefaultIconButton() {
return (
);
}
```
## Property
***
### Size
IconButton의 크기를 설정합니다.
```tsx
import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function IconButtonSize() {
return (
sm
md
lg
xl
);
}
```
### ColorPalette
IconButton의 색상을 설정합니다.
```tsx
import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function IconButtonColor() {
return (
primary
secondary
success
warning
danger
contrast
);
}
```
### Variant
IconButton의 시각적 변형을 설정합니다.
```tsx
import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function IconButtonVariant() {
return (
fill
outline
ghost
);
}
```
### Shape
IconButton의 모양을 설정합니다.
```tsx
import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function IconButtonShape() {
return (
square
circle
);
}
```
### Disabled
IconButton의 비활성화 상태를 설정합니다.
```tsx
import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function IconButtonDisabled() {
return (
fill
outline
ghost
);
}
```
## Props Table
***
### IconButton
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | 버튼 크기 |
| `shape` | `circle`, `square` | `square` | 버튼 모양 |
| **aria-label** | `string` | - | 현재 요소의 레이블을 정의하는 문자열 값 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | 버튼 색상 |
| `variant` | `outline`, `fill`, `ghost` | `fill` | 버튼 스타일 (fill: 채움, outline: 테두리, ghost: 투명) |
# InputGroup
URL: /docs/components/input-group
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/input-group.mdx
InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.
***
title: 'InputGroup'
site\_name: 'InputGroup - Vapor Core'
description: 'InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.'
-----------------------------------------------------------------------------------------------
```tsx
'use client';
import { InputGroup, TextInput, VStack } from '@vapor-ui/core';
export default function DefaultInputGroup() {
return (
);
}
```
## Examples
***
### Custom Counter
커스텀 카운터 UI를 구현합니다.
```tsx
'use client';
import { InputGroup, Text, TextInput, VStack } from '@vapor-ui/core';
export default function InputGroupCustomCounter() {
return (
커스텀 카운터 예시 1
{({ count, maxLength }) => `${count} of ${maxLength} characters`}
커스텀 카운터 예시 2
{({ count, maxLength, value }) => (
maxLength * 0.8 ? 'danger-100' : 'hint-100'
}
>
{count}/{maxLength} {value.length > 50 && '(50자 초과)'}
)}
);
}
```
## Props Table
***
### InputGroup.Root
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### InputGroup.Counter
| Prop | Type | Default | Description |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal`, `(props: CounterRenderProps) => ReactNode` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Menu
URL: /docs/components/menu
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/menu.mdx
드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다
***
title: 'Menu'
site\_name: 'Menu - Vapor Core'
description: '드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다'
-------------------------------------------------
```tsx
'use client';
import { Button, Menu } from '@vapor-ui/core';
export default function DefaultMenu() {
return (
메뉴 열기} />
새 파일새 폴더복사붙여넣기삭제
);
}
```
## Property
***
### Disabled
Menu의 비활성화 상태를 설정합니다.
```tsx
'use client';
import { Button, HStack, Menu, Text, VStack } from '@vapor-ui/core';
export default function MenuDisabled() {
return (
disabled item
일반 메뉴} />
활성 아이템 1비활성 아이템활성 아이템 2비활성 아이템 2활성 아이템 3
disabled menu
비활성 메뉴} />
아이템 1아이템 2아이템 3
);
}
```
## Examples
***
### Positioning
Menu의 표시 위치를 설정합니다.
```tsx
'use client';
import { Button, HStack, Menu, Text, VStack } from '@vapor-ui/core';
export default function MenuPositioning() {
return (
top
상단 메뉴} />
상단 아이템 1상단 아이템 2상단 아이템 3
right
우측 메뉴} />
우측 아이템 1우측 아이템 2우측 아이템 3
bottom
하단 메뉴} />
하단 아이템 1하단 아이템 2하단 아이템 3
left
좌측 메뉴} />
좌측 아이템 1좌측 아이템 2좌측 아이템 3
);
}
```
### Groups
Menu 아이템을 그룹화합니다.
```tsx
'use client';
import { Button, Menu } from '@vapor-ui/core';
export default function MenuGroups() {
return (
그룹 메뉴} />
파일새 파일파일 열기파일 저장편집복사붙여넣기잘라내기도구설정도움말
);
}
```
### With Checkbox Items
Checkbox Item을 사용합니다.
```tsx
'use client';
import { useState } from 'react';
import { Button, Menu } from '@vapor-ui/core';
export default function MenuCheckbox() {
const [showToolbar, setShowToolbar] = useState(true);
const [showSidebar, setShowSidebar] = useState(false);
const [showStatusbar, setShowStatusbar] = useState(true);
return (
보기 설정} />
보기 옵션
툴바 표시
사이드바 표시
상태바 표시
);
}
```
### With Radio Items
Radio Item을 사용합니다.
```tsx
'use client';
import { useState } from 'react';
import { Button, Menu } from '@vapor-ui/core';
export default function MenuRadio() {
const [fontSize, setFontSize] = useState('medium');
return (
글꼴 크기} />
글꼴 크기 선택작게 (12px)보통 (14px)크게 (16px)매우 크게 (18px)
);
}
```
### With Submenu
Submenu를 구성할 수 있습니다.
```tsx
'use client';
import { Button, Menu } from '@vapor-ui/core';
export default function MenuSubmenu() {
return (
서브메뉴} />
새 파일파일 열기최근 파일document.txtpresentation.pptxspreadsheet.xlsx더 많은 파일...내보내기PDF로 내보내기이미지로 내보내기HTML로 내보내기종료
);
}
```
## Props Table
***
### Menu.Root
| Prop | Type | Default | Description |
| ---------------------- | -------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orientation` | `horizontal`, `vertical` | `vertical` | 메뉴의 시각적 방향입니다. 로빙 포커스가 위/아래 또는 왼쪽/오른쪽 화살표 키를 사용하는지 제어합니다. |
| **children** | `undefined`, `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `loop` | `false`, `true` | `true` | 키보드 포커스를 첫 번째 항목으로 다시 루프할지 여부 화살표 키를 사용할 때 목록 끝에 도달하면. |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. |
| `open` | `false`, `true` | - | 메뉴가 현재 열려 있는지 여부입니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | 메뉴가 처음에 열려 있는지 여부입니다.
제어되는 메뉴를 렌더링하려면 대신 `open` 속성을 사용하세요. |
| `modal` | `false`, `true` | `true` | 메뉴가 열려 있을 때 모달 상태에 들어가는지 여부를 결정합니다. - `true`: 사용자 상호작용이 메뉴로 제한됩니다: 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 상호작용이 비활성화됩니다. - `false`: 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다. |
| `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 메뉴가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다. |
| `onOpenChangeComplete` | `(open: boolean) => void` | - | 메뉴가 닫힐 때 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. |
| `closeParentOnEsc` | `false`, `true` | `true` | 하위 메뉴에 있을 때, Escape 키를 눌렀을 때 전체 메뉴를 닫을지 현재 하위 메뉴만 닫을지 결정합니다. |
| `actionsRef` | `RefObject` | - | 명령형 작업에 대한 ref입니다. - `unmount`: 지정된 경우, 메뉴가 닫힐 때 마운트 해제되지 않습니다. 대신, `unmount` 함수를 호출하여 메뉴를 수동으로 마운트 해제해야 합니다. 메뉴의 애니메이션이 외부 라이브러리에 의해 제어되는 경우에 유용합니다. |
### Menu.Trigger
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 구성 요소가 사용자 상호작용을 무시해야 하는지 여부. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `true` | 구성 요소가 교체할 때 네이티브 '\