'). |
| `openOnHover` | `false`, `true` | `false` | 트리거에 마우스를 올려놓았을 때 메뉴도 열려야 하는지 여부입니다. |
| `delay` | `number` | `100` | 메뉴가 열리기 전에 기다리는 시간입니다. 밀리초 단위로 지정합니다.
`openOnHover` prop이 필요합니다. |
| `closeDelay` | `number` | `0` | 마우스가 떠났을 때 메뉴가 닫히기까지 대기하는 시간입니다. 밀리초 단위로 지정합니다.
`openOnHover` prop이 필요합니다. |
### Menu.PositionerPrimitive
| Prop | Type | Default | Description |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `id` | `string` | - | |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable
`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 집중할 요소를 결정합니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 상태에서 포털을 DOM에 마운트할지 여부. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링하기 위해 상위 요소입니다. |
#### Menu.PositionerPrimitive
| Prop | Type | Default | Description |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 스크롤되어 사라진 후에도 팝업을 뷰포트 내에 유지할지 여부입니다. |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 요소입니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.`, `ReactPortal` | - | |
| `onClick` | `MouseEventHandler` | - | 메뉴 항목에 대한 클릭 핸들러입니다. |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.`, `ReactPortal` | - | 컴포넌트의 내용입니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Menu.GroupLabel
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Menu.SubmenuRoot
| Prop | Type | Default | Description |
| ---------------------- | -------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orientation` | `horizontal`, `vertical` | `vertical` | 메뉴의 시각적 방향.`, `ReactPortal` | - | |
| `loop` | `false`, `true` | `true` | 키보드 포커스를 화살표 키를 사용하여 목록 끝에 도달했을 때 첫 번째 항목으로 다시 루프할지 여부입니다. |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. |
| `open` | `false`, `true` | - | 메뉴가 현재 열려 있는지 여부입니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | 메뉴가 처음에 열려 있는지 여부입니다.` | - | 명령적 행동에 대한 참조.`, `ReactPortal` | - | |
| `onClick` | `MouseEventHandler` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | 구성 요소가 교체할 때 네이티브 `<button>` 요소를 렌더링하는지 여부`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스할 요소를 결정합니다.` | - | 메뉴 항목의 클릭 핸들러입니다. |
| `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.` | - | 메뉴 항목의 클릭 핸들러입니다. |
| `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.`, `ReactPortal` | - | 컴포넌트의 콘텐츠입니다. |
| `defaultValue` | `any` | - | 초기에 선택되어야 하는 라디오 항목의 비제어 값입니다.`, `ReactPortal` | - | |
| `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. |
| **value** | `any` | - | 라디오 항목의 값입니다.`, `ReactPortal` | - | |
| `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. |
| **value** | `any` | - | 라디오 항목의 값입니다.
```tsx
import { MultiSelect } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
export default function DefaultMultiSelect() {
return (
{fonts.map((font) => (
{font.label}
))}
);
}
```
## Property
***
### Size
MultiSelect의 크기를 설정합니다.
```tsx
import { HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';
const options = [
{ label: '옵션 1', value: 'option1' },
{ label: '옵션 2', value: 'option2' },
{ label: '옵션 3', value: 'option3' },
];
export default function MultiSelectSize() {
return (
sm
md
lg
xl
);
}
const MultiSelectTemplate = (props: MultiSelect.Root.Props) => {
return (
{options.map((option) => (
{option.label}
))}
);
};
```
### Controlled State
MultiSelect의 선택 상태를 제어합니다.
```tsx
'use client';
import { useState } from 'react';
import { Button, HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
export default function MultiSelectControlled() {
const [value, setValue] = useState([]);
const handleValueChange = (newValue: unknown) => {
setValue(newValue as string[]);
};
return (
{fonts.map((font) => (
{font.label}
))}
선택된 값:{' '}
{value.length > 0 ? value.join(', ') : '없음'}
setValue(['serif', 'mono'])}>
Serif, Mono 선택
setValue([])}>
모두 해제
);
}
```
### States
MultiSelect의 다양한 상태를 설정합니다.
```tsx
import { HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';
const options = [
{ label: '옵션 1', value: 'option1' },
{ label: '옵션 2', value: 'option2' },
{ label: '옵션 3', value: 'option3' },
];
export default function MultiSelectStates() {
return (
default
disabled
readOnly
invalid
);
}
export const MultiSelectTemplate = (props: MultiSelect.Root.Props) => {
return (
{options.map((option) => (
{option.label}
))}
);
};
```
## Examples
***
### Items Configuration
다양한 형태의 아이템 데이터를 사용합니다.
```tsx
import { MultiSelect, Text, VStack } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
const languages = {
javascript: 'JavaScript',
typescript: 'TypeScript',
python: 'Python',
java: 'Java',
go: 'Go',
};
export default function MultiSelectItems() {
return (
배열 형태의 아이템
{fonts.map((font) => (
{font.label}
))}
객체 형태의 아이템
{Object.entries(languages).map(([value, label]) => (
{label}
))}
);
}
```
### Grouping Options
옵션을 그룹으로 묶어 구조화합니다.
```tsx
import { Box, MultiSelect } from '@vapor-ui/core';
export default function MultiSelectGrouping() {
return (
프론트엔드
React
Vue
Angular
Svelte
백엔드
Node.js
Python
Java
Go
데이터베이스
MySQL
PostgreSQL
MongoDB
Redis
);
}
```
### Custom Value Display
MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표시 방법을 커스터마이징할 수 있습니다. 기본적으로는 배지 형태로 표시되지만, 문자열이나 커스텀 컴포넌트로 변경할 수 있습니다.
```tsx
import { Badge, Flex, HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';
const languages = {
javascript: 'JavaScript',
typescript: 'TypeScript',
python: 'Python',
java: 'Java',
go: 'Go',
rust: 'Rust',
};
const renderRestValue = (value: string[]) => {
if (!value.length) {
return '언어 선택';
}
const displayValues = value.slice(0, 2);
const remainingCount = value.length - 2;
return (
{displayValues.map((val) => (
{languages[val as keyof typeof languages]}
))}
{remainingCount > 0 && (
+{remainingCount} more
)}
);
};
const renderStringValue = (value: string[]) => {
if (!value.length) {
return '언어 선택';
}
return value.map((v) => languages[v as keyof typeof languages]).join(', ');
};
export default function MultiSelectCustomValue() {
return (
커스텀 값 표시 (최대 2개 + 더보기)
{renderRestValue}
{Object.entries(languages).map(([value, label]) => (
{label}
))}
문자열 형태 표시
{renderStringValue}
{Object.entries(languages).map(([value, label]) => (
{label}
))}
);
}
```
## Props Table
***
### MultiSelect.Root
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | - | 셀렉트 컴포넌트의 고유 식별자 |
| `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `defaultValue` | `null`, `Value[]` | `null` | 컴포넌트가 처음 렌더링될 때의 비제어 값입니다.` | - | 숨겨진 input 요소에 접근하기 위한 ref |
| `defaultOpen` | `false`, `true` | `false` | select 팝업의 초기 열림 상태 (비제어 컴포넌트)` | - | 명령형 동작을 위한 ref`, `readonly { label: ReactNode; value: Value; }[]` | - | select 팝업에 렌더링되는 아이템 데이터 구조`, `ReactPortal` | - | 트리거 버튼 내부에 렌더링할 콘텐츠 |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal` | - | 트리거 버튼 내부에 렌더링할 콘텐츠 |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal`, `(value: any) => ReactNode` | - | 선택된 값의 포맷을 지정하는 `ReactNode`를 반환하는 함수를 받습니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### MultiSelect.PlaceholderPrimitive
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### MultiSelect.Popup
| Prop | Type | Default | Description |
| ------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `portalElement` | `ReactElement` | - | 커스텀 포털 요소. 기본값은 PortalPrimitive입니다. |
| `positionerElement` | `ReactElement` | - | 커스텀 포지셔너 요소. 기본값은 PositionerPrimitive입니다. |
#### MultiSelect.PortalPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소 |
#### MultiSelect.PositionerPrimitive
| Prop | Type | Default | Description |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### MultiSelect.Item
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
| `label` | `string` | - | 키보드 텍스트 탐색 시 항목을 매칭하는 데 사용할 텍스트 레이블을 지정합니다.`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 항목이 선택되지 않았을 때도 HTML 요소를 DOM에 유지할지 여부 |
### MultiSelect.Separator
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `orientation` | `horizontal`, `vertical` | `horizontal` | 구분선 방향 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### MultiSelect.Group
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### MultiSelect.GroupLabel
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# NavigationMenu
URL: /docs/components/navigation-menu
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/navigation-menu.mdx
여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.
***
title: 'NavigationMenu'
site\_name: 'NavigationMenu - Vapor Core'
description: '여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.'
-------------------------------------------------------------
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function DefaultNavigationMenu() {
return (
Default Link
Current Link
Disabled Link
);
}
```
## Property
***
### Size
NavigationMenu의 크기를 설정합니다.
```tsx
import { HStack, NavigationMenu, Text, VStack } from '@vapor-ui/core';
export default function NavigationMenuSize() {
return (
sm
Home
About
md
Home
About
lg
Home
About
xl
Home
About
);
}
```
### Direction
NavigationMenu의 방향을 설정합니다.
```tsx
import { HStack, NavigationMenu, Text, VStack } from '@vapor-ui/core';
export default function NavigationMenuDirection() {
return (
horizontal
Home
About
Contact
vertical
Home
About
Contact
);
}
```
### Disabled
NavigationMenu의 비활성화 상태를 설정합니다.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavigationMenuDisabled() {
return (
기본 상태와 비활성화 상태
활성 링크
비활성화 링크
다른 활성 링크
현재 페이지와 비활성화 상태
홈
현재 페이지
비활성화 링크
연락처
);
}
```
### Current
NavigationMenu의 현재 페이지 상태를 설정합니다.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavigationMenuCurrent() {
return (
현재 페이지 표시
홈
제품 (현재 페이지)
서비스
회사소개
);
}
```
## Examples
***
### With Icons
아이콘과 함께 사용합니다.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
import { HomeIcon, SettingIcon, StarIcon, UserIcon } from '@vapor-ui/icons';
export default function NavigationMenuWithIcon() {
return (
아이콘과 텍스트 조합
아이콘만 사용
세로 방향에서의 아이콘
);
}
```
### With Popup
팝오버 형태로 사용합니다.
```tsx
import { NavigationMenu, VStack } from '@vapor-ui/core';
export default function NavigationMenuSelected() {
return (
선택된 상태 표시
아이템 1
내용물 1
아이템 2
내용물 2
아이템 3
내용물 3
);
}
```
### Flexible Usage
NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.
```tsx
import { NavigationMenu } from '@vapor-ui/core';
export default function NavigationMenuSelected() {
return (
홈
아이템
내용물
);
}
```
## Props Table
***
### NavigationMenu.Root
| Prop | Type | Default | Description |
| ---------------------- | -------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `direction` | `horizontal`, `vertical` | - | |
| `stretch` | `false`, `true` | - | |
| `size` | `sm`, `md`, `lg`, `xl` | - | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `orientation` | `horizontal`, `vertical` | `horizontal` | 네비게이션 메뉴의 방향을 지정합니다. |
| **aria-label** | `string` | - | 현재 요소를 설명하는 레이블 문자열을 정의합니다. 스크린 리더 사용자를 위한 접근성 속성입니다. |
| `defaultValue` | `any` | `null` | 초기에 선택되어야 하는 항목의 비제어 값입니다.` | - | 명령형 작업을 위한 ref입니다. |
| `onOpenChangeComplete` | `(open: boolean) => void` | - | 네비게이션 메뉴가 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. |
| `onValueChange` | `(value: any, eventDetails: ChangeEventDetails) => void` | - | 값이 변경될 때 호출되는 콜백 함수입니다. |
| `delay` | `number` | `50` | 네비게이션 메뉴를 열기 전에 대기하는 시간입니다. 밀리초 단위로 지정됩니다. |
| `closeDelay` | `number` | `50` | 네비게이션 메뉴를 닫기 전에 대기하는 시간입니다. 밀리초 단위로 지정됩니다. |
### NavigationMenu.List
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### NavigationMenu.Item
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `value` | `any` | - | 이 네비게이션 메뉴 항목을 식별하는 고유 값입니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `container` | `null`, `HTMLElement`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소입니다. |
| `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨져 있는 동안 DOM에 포털을 마운트된 상태로 유지할지 여부를 결정합니다. |
#### NavigationMenu.PositionerPrimitive
| Prop | Type | Default | Description |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 화면 밖으로 스크롤된 후에도 팝업을 뷰포트 내에 유지할지 여부를 결정합니다. |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 배치할 기준 요소입니다.
```tsx
import { Pagination } from '@vapor-ui/core';
export default function DefaultPagination() {
return (
);
}
```
## Property
### Sibling Count
Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다.
```tsx
import { Pagination, Text, VStack } from '@vapor-ui/core';
export default function PaginationSiblingCount() {
return (
1 Sibling
3 Sibling
);
}
```
### Boundary Count
Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다.
```tsx
import { Pagination, Text, VStack } from '@vapor-ui/core';
export default function PaginationBoundaryCount() {
return (
1 Boundary
3 Boundary
);
}
```
### Disabled
Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.
```tsx
import { Pagination } from '@vapor-ui/core';
export default function PaginationDisabled() {
return (
);
}
```
### Size
Pagination의 크기를 설정합니다.
```tsx
import { HStack, Pagination, Text, VStack } from '@vapor-ui/core';
export default function PaginationSize() {
return (
sm
md
lg
xl
);
}
```
## Examples
### Controlled
Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.
```tsx
import { useState } from 'react';
import { Button, HStack, Pagination, Text, VStack } from '@vapor-ui/core';
export default function PaginationControlled() {
const [page, setPage] = useState(7);
return (
Current Page is, {page}
setPage(7)}>
Move to Page 7
);
}
```
***
### Pagination.Root
| Prop | Type | Default | Description |
| --------------- | ---------------------- | ------- | ---------------------------------------------- |
| `defaultPage` | `number` | `1` | 초기 렌더링 시 활성화되어야 하는 페이지 번호입니다. |
| `page` | `number` | `-` | 활성화할 페이지의 제어된 값입니다. onPageChange와 함께 사용해야 합니다. |
| `onPageChange` | `function` | `-` | 값이 변경될 때 호출되는 이벤트 핸들러입니다. |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | Pagination의 높이·타이포그래피 크기 등을 제어합니다. |
| `disabled` | `boolean` | `false` | Pagination의 비활성화 여부를 설정합니다. |
| `totalPages` | `number` | `1` | 화면에 표시할 전체 페이지 수를 설정합니다. |
| `siblingCount` | `number` | `1` | 현재 페이지 양쪽에 표시할 페이지 번호의 개수를 설정합니다. |
| `boundaryCount` | `number` | `1` | 처음과 마지막에 표시할 페이지 번호의 개수를 설정합니다. |
| `children` | `ReactNode` | `-` | 네비게이션 메뉴의 자식 컴포넌트들입니다. |
# Popover
URL: /docs/components/popover
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/popover.mdx
Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.
***
title: 'Popover'
site\_name: 'Popover - Vapor Core'
description: 'Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.'
-------------------------------------------------------------------------------------------------------
```tsx
'use client';
import { Button, Popover } from '@vapor-ui/core';
export default function DefaultPopover() {
return (
알림
새로운 메시지 3개와 알림 1개가 있습니다.
);
}
```
## Property
***
### PositionerProps
Popover가 나타날 위치와 정렬을 설정합니다.
```tsx
'use client';
import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';
export default function PopoverPositioning() {
return (
Side
top
상단 팝오버
트리거 위쪽에 표시되는 팝오버입니다.
right
우측 팝오버
트리거 오른쪽에 표시되는 팝오버입니다.
bottom
하단 팝오버
트리거 아래쪽에 표시되는 팝오버입니다.
left
좌측 팝오버
트리거 왼쪽에 표시되는 팝오버입니다.
Alignment
start
시작점 정렬
트리거의 시작점에 정렬된 팝오버입니다.
center
중앙 정렬
트리거의 중앙에 정렬된 팝오버입니다.
end
끝점 정렬
트리거의 끝점에 정렬된 팝오버입니다.
);
}
```
### Offset
Popover와 트리거 간의 거리를 조정합니다.
```tsx
'use client';
import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';
export default function PopoverOffset() {
return (
default
기본 오프셋
기본 8px 오프셋이 적용된 팝오버입니다.
sideOffset 16
사이드 오프셋 16px
트리거로부터 16px 떨어진 팝오버입니다.
alignOffset 100
정렬 오프셋 100px
정렬 축에서 100px 이동한 팝오버입니다.
combined
복합 오프셋
사이드 24px, 정렬 -100px 오프셋이 적용된 팝오버입니다.
);
}
```
## Examples
***
### Content Variations
간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다.
```tsx
'use client';
import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';
export default function PopoverPopup() {
return (
text
간단한 팝오버 메시지입니다.
title + desc
알림
새로운 업데이트가 있습니다. 확인해보세요.
interactive
설정
원하는 설정을 선택하세요.
옵션 1
}
/>
옵션 2
}
/>
);
}
```
## Props Table
***
### Popover.Root
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `open` | `false`, `true` | - | 팝오버의 현재 열림/닫힘 상태를 제어합니다.` | - | 명령형 액션에 대한 ref입니다.`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 열릴 때 집중할 요소를 결정합니다.`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 닫혔을 때 집중할 요소를 결정합니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 동안 포탈을 DOM에 유지할지 여부 |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소 |
#### Popover.PositionerPrimitive
| Prop | Type | Default | Description |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 열릴 때 집중할 요소를 결정합니다.`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 닫혔을 때 집중할 요소를 결정합니다.
```tsx
import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';
export default function DefaultRadioCard() {
return (
Light Theme
Dark Theme
System (Disabled)
);
}
```
## Property
***
### Disabled
사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.
```tsx
import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioCardDisabled() {
return (
group disabled
Option 1
Option 2
Option 3
individual card disabled
Enabled Option
Disabled Option
Another Enabled Option
);
}
```
### Read Only
읽기 전용 상태로, 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.
```tsx
import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioCardReadonly() {
return (
readOnly
Unselected Option
Selected Option (Read Only)
Another Option
normal
Unselected Option
Selected Option (Editable)
Another Option
);
}
```
## Examples
***
### Simple Usage
RadioGroup.Root와 함께 사용합니다.
```tsx
import { useState } from 'react';
import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioCardSimple() {
const [value, setValue] = useState('option1');
return (
Selected: {value}
setValue(newValue as string)}
>
First Option
Second Option
Third Option
);
}
```
### Direction
VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치합니다.
```tsx
import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioCardDirection() {
return (
vertical
Option 1
Option 2
Option 3
horizontal
Option 1
Option 2
Option 3
);
}
```
### With Rich Content
RadioCard는 고정된 높이가 없어 다양한 콘텐츠를 포함할 수 있습니다. 텍스트, 아이콘, 가격 정보 등 복잡한 레이아웃을 자유롭게 구성할 수 있습니다.
```tsx
import { useState } from 'react';
import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioCardWithContent() {
const [value, setValue] = useState('basic');
return (
선택된 플랜: {value}
setValue(newValue as string)}
>
Basic
$9/month
5 projects included
Pro
$29/month
Unlimited projects
Enterprise
Custom pricing
Advanced features
);
}
```
## Props Table
***
### RadioCard
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| **value** | `any` | - | 라디오 그룹 내에서 고유한 식별 값 |
| `readOnly` | `false`, `true` | `false` | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부 |
| `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref |
| `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function DefaultRadioGroup() {
return (
);
}
```
## Property
***
### Size
RadioGroup의 크기를 설정합니다.
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioGroupSize() {
return (
md
lg
);
}
```
### Disabled
RadioGroup의 비활성화 상태를 설정합니다.
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioGroupDisabled() {
return (
individual item disabled
group disabled
);
}
```
### Read Only
RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioReadOnly() {
return (
);
}
```
## Examples
***
### Direction
Radio 그룹의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다.
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function RadioDirection() {
return (
vertical
horizontal
);
}
```
### Flexible
Radio의 유연한 사용예시입니다.
```tsx
import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';
export default function Flexible() {
return (
Vertical
Option 1
Option 2
Option 3
);
}
```
## Props Table
***
### RadioGroup.Root
| Prop | Type | Default | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size` | `md`, `lg` | - | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 |
| `defaultValue` | `unknown` | - | The uncontrolled value of the radio button that should be initially selected.` | - | 숨겨진 input 요소에 접근하기 위한 ref |
| `invalid` | `false`, `true` | - | |
### RadioGroup.Label
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Radio.Root
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `size` | `md`, `lg` | - | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| **value** | `any` | - | 라디오 그룹 내에서 고유한 식별 값 |
| `readOnly` | `false`, `true` | `false` | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부 |
| `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref |
| `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
```tsx
import { SegmentedControl } from '@vapor-ui/core';
export default function DefaultSegmentedControl() {
return (
전체
진행 중
완료
예정
);
}
```
주의!
* `SegmentedControl.Root`의 `defaultValue`를 지정하지 않으면 첫 번째 아이템이 자동 선택됩니다.
* `SegmentedControl.Item`의 `value=""` 속성에는 **반드시 아이템의 역할을 설명할 수 있는 이름**을 사용하세요.
## Property
***
### Size
SegmentedControl의 크기를 설정합니다.
```tsx
import { SegmentedControl, VStack } from '@vapor-ui/core';
export default function SegmentedControlSize() {
return (
SM
Test
MD
Test
LG
Test
);
}
```
### Controlled State
SegmentedControl의 선택 상태를 외부에서 제어합니다.
```tsx
import { useState } from 'react';
import { Button, HStack, SegmentedControl, VStack } from '@vapor-ui/core';
import { DarkIcon, LightIcon, PcIcon } from '@vapor-ui/icons';
export default function DefaultSegmentedControl() {
const [mode, setMode] = useState('light');
return (
현재 모드: {mode}
setMode('light')}>라이트 모드
setMode('dark')}>다크 모드
setMode('system')}>시스템 모드
);
}
```
### Disabled
SegmentedControl의 비활성 상태를 설정합니다.
```tsx
import { SegmentedControl } from '@vapor-ui/core';
export default function DefaultSegmentedControl() {
return (
전체
진행 중
완료
예정
);
}
```
## Examples
***
### Icon Item
`SegmentedControl.IconItem`을 이용하여 아이콘만 포함하는 아이템을 사용할 수 있습니다. 이 경우, 각 아이템에 `aria-label`로 접근 가능한 이름을 제공하거나, 툴팁으로 보조 설명을 추가하는 것을 권장합니다.
```tsx
import { SegmentedControl, Tooltip, VStack } from '@vapor-ui/core';
import { DarkIcon, LightIcon, PcIcon } from '@vapor-ui/icons';
export default function DefaultSegmentedControl() {
return (
라이트 모드
다크 모드
시스템 모드
);
}
```
## Props Table
***
### SegmentedControl.Root
| Prop | Type | Default | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `size` | `sm`, `md`, `lg` | - | |
| `defaultValue` | `string` | - | The default value of the SegmentedControl. This is used when you want the SegmentedControl to manage its own state. It should be the value of one of the SegmentedControl.Item components. |
| `onValueChange` | `(value: string, eventDetails: SegmentedControl.RootPrimitive.ChangeEventDetails) => void` | - | Callback fired when the value of the SegmentedControl changes. It receives the new value and the original change event details from the underlying RadioGroup component. This is useful for handling side effects when the user selects a different segment. |
| `value` | `string` | - | The controlled value of the SegmentedControl. This should be used in conjunction with `onValueChange` to update the value when the user interacts with the SegmentedControl. |
| `className` | `string \| ((state: SegmentedControl.Root.State) => (string \| undefined))` | - | |
| `indicatorElement` | `ReactElement>` | - | A Custom element for SegmentedControl.IndicatorPrimitive. If not provided, the default SegmentedControl.IndicatorPrimitive will be rendered. |
| `disabled` | `boolean` | - | Whether the component should ignore user interaction. |
| `form` | `string` | - | Identifies the form that owns the radio inputs.` | - | A ref to access the hidden input element. |
| `name` | `string` | - | Identifies the field when a form is submitted. |
| `readOnly` | `boolean` | - | Whether the user should be unable to select a different radio button in the group. |
| `required` | `boolean` | - | Whether the user must choose a value before submitting a form. |
| `style` | `React.CSSProperties \| ((state: SegmentedControl.Root.State) => (React.CSSProperties \| undefined))` | - | Style applied to the element, or a function that` | - | A ref to access the hidden input element. |
| `name` | `string` | - | Identifies the field when a form is submitted. |
| `readOnly` | `boolean` | - | Whether the user should be unable to select a different radio button in the group. |
| `required` | `boolean` | - | Whether the user must choose a value before submitting a form. |
| `style` | `React.CSSProperties \| ((state: SegmentedControl.Root.State) => (React.CSSProperties \| undefined))` | - | Style applied to the element, or a function that` | - | A ref to access the hidden input element. |
| `nativeButton` | `boolean` | - | Whether the component renders a native `<button>` element when replacing it` | - | A ref to access the hidden input element. |
| `nativeButton` | `boolean` | - | Whether the component renders a native `<button>` element when replacing it
```tsx
import { Select } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans-serif' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
export default function DefaultSelect() {
return (
폰트
{fonts.map((font) => (
{font.label}
))}
);
}
```
## Property
***
### Size
Select의 크기를 설정합니다.
```tsx
import { HStack, Select, Text, VStack } from '@vapor-ui/core';
export default function SelectSize() {
return (
sm
md
lg
xl
);
}
const SelectTemplate = (props: Select.Root.Props) => {
return (
옵션 1
옵션 2
);
};
```
### Positioning
Select 드롭다운이 나타날 위치를 설정합니다. 기본값은 'bottom'입니다.
```tsx
import { HStack, Select } from '@vapor-ui/core';
export default function SelectPositioning() {
return (
옵션 1
옵션 2
옵션 1
옵션 2
옵션 1
옵션 2
옵션 1
옵션 2
);
}
```
### Controlled State
Select의 선택 상태를 외부에서 제어합니다.
```tsx
'use client';
import { useState } from 'react';
import { Button, HStack, Select, Text, VStack } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans-serif' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
export default function SelectControlled() {
const [value, setValue] = useState(fonts[0].value);
const handleValueChange = (newValue: unknown) => {
setValue(newValue as string);
};
return (
폰트
{fonts.map((font) => (
{font.label}
))}
선택된 값: {value || '없음'}
setValue('serif')}>
Serif 선택
setValue('')} colorPalette="secondary">
선택 해제
);
}
```
### States
Select의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정합니다.
```tsx
import { HStack, Select, Text, VStack } from '@vapor-ui/core';
export default function SelectStates() {
return (
default
disabled
readOnly
invalid
);
}
const SelectTemplate = (props: Select.Root.Props) => {
return (
옵션 1
옵션 2
);
};
```
## Examples
***
### Items Configuration
배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다.
```tsx
import { Select, Text, VStack } from '@vapor-ui/core';
const fonts = [
{ label: 'Sans-serif', value: 'sans' },
{ label: 'Serif', value: 'serif' },
{ label: 'Monospace', value: 'mono' },
{ label: 'Cursive', value: 'cursive' },
];
const languages = {
javascript: 'JavaScript',
typescript: 'TypeScript',
python: 'Python',
java: 'Java',
go: 'Go',
};
export default function SelectItems() {
return (
배열 형태의 아이템
폰트
{fonts.map((font) => (
{font.label}
))}
객체 형태의 아이템
프로그래밍 언어
{Object.entries(languages).map(([value, label]) => (
{label}
))}
);
}
```
### Grouping Options
관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다.
```tsx
import { Select, VStack } from '@vapor-ui/core';
export default function SelectGrouping() {
return (
프론트엔드
React
Vue
Angular
백엔드
Node.js
Python
Java
데이터베이스
MySQL
PostgreSQL
MongoDB
);
}
```
### Custom Value Display
Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마이징할 수 있습니다.
```tsx
import { Select, Text, VStack } from '@vapor-ui/core';
const fonts = {
sans: 'Sans-serif',
serif: 'Serif',
mono: 'Monospace',
cursive: 'Cursive',
};
const renderValue = (value: string) => {
if (!value) return '선택된 폰트 없음';
return {fonts[value as keyof typeof fonts]} ;
};
export default function SelectCustomValue() {
return (
커스텀 값 표시
{renderValue}
{Object.entries(fonts).map(([value, label]) => (
{label}
))}
);
}
```
## Props Table
***
### Select.Root
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | - | Select의 id |
| `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `defaultValue` | `unknown` | `null` | 처음 렌더링될 때 select의 비제어 값입니다.` | - | 숨겨진 input 요소에 접근하기 위한 ref |
| `defaultOpen` | `false`, `true` | `false` | Select 팝업의 초기 열림 상태입니다.` | - | 명령형 액션을 위한 ref입니다.`, `readonly { label: ReactNode; value: unknown; }[]` | - | Select 팝업에 렌더링되는 아이템 데이터 구조입니다.`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal`, `(value: any) => ReactNode` | - | 선택된 값의 포맷을 지정하는 `ReactNode`를 반환하는 함수를 받습니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Select.PlaceholderPrimitive
| Prop | Type | Default | Description |
| -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
#### Select.TriggerIconPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Select.Popup
| Prop | Type | Default | Description |
| ------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `portalElement` | `ReactElement` | - | 사용자 정의 Portal 요소 |
| `positionerElement` | `ReactElement` | - | 사용자 정의 Positioner 요소 |
#### Select.PositionerPrimitive
| Prop | Type | Default | Description |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Select.Item
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
| `label` | `string` | - | 키보드 텍스트 네비게이션 중 항목이 매칭될 때 사용할 텍스트 라벨을 지정합니다.`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 |
| `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 아이템이 선택되지 않았을 때 HTML 요소를 DOM에 유지할지 여부입니다. |
### Select.Group
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Select.GroupLabel
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Select.Separator
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `orientation` | `horizontal`, `vertical` | `horizontal` | 구분선 방향 |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Sheet
URL: /docs/components/sheet
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/sheet.mdx
Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.
***
title: 'Sheet'
site\_name: 'Sheet - Vapor Core'
description: 'Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.'
---------------------------------------------------------------------------------------------
```tsx
'use client';
import { Box, Button, Sheet } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
export default function DefaultSheet() {
return (
알림
Sheet는 화면 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다.
추가 정보나 작업을 위한 공간을 제공합니다.
확인} />
);
}
```
## Property
***
### Side
Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다.
```tsx
'use client';
import { Box, Button, HStack, Sheet, Text, VStack } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
export default function SheetSide() {
return (
right
우측 Sheet
화면 우측에서 슬라이드됩니다. (기본값)
left
좌측 Sheet
화면 좌측에서 슬라이드됩니다.
top
상단 Sheet
화면 상단에서 슬라이드됩니다.
bottom
하단 Sheet
화면 하단에서 슬라이드됩니다.
);
}
```
### Controlled State
Sheet의 열림/닫힘 상태를 외부에서 제어합니다.
```tsx
'use client';
import { useEffect, useState } from 'react';
import { Box, Button, Sheet, Text, VStack } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
export default function SheetControlled() {
const [isOpen, setIsOpen] = useState(false);
const [count, setCount] = useState(3);
useEffect(() => {
let timer: NodeJS.Timeout;
if (isOpen && count > 0) {
timer = setTimeout(() => {
setCount((prev) => prev - 1);
}, 1000);
} else if (isOpen && count === 0) {
setIsOpen(false);
setCount(3); // 초기화
}
return () => {
if (timer) clearTimeout(timer);
};
}, [count, isOpen]);
return (
setIsOpen(true)} colorPalette="primary">
Sheet 열기
현재 상태: {isOpen ? '열림' : '닫힘'}
제어된 Sheet
외부에 의해{' '}
{count}
초 후 상태가 제어됩니다.
);
}
```
### Keep Mounted
Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다.
```tsx
'use client';
import { Box, Button, HStack, Sheet, Text, TextInput, VStack } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
export default function SheetKeepMounted() {
return (
normal
일반 Sheet
이 Sheet는 닫힐 때 DOM에서 제거됩니다. 다시 열 때마다 내용이 새로
생성됩니다.
keepMounted
유지되는 Sheet
이 Sheet는 닫혀도 DOM에 유지됩니다. 입력한 내용이 보존되는
것을 확인해보세요.
);
}
```
## Examples
***
### Custom Usage
유연하게 Sheet를 사용합니다.
```tsx
'use client';
import { Box, Button, Sheet } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
export default function Flexible() {
return (
간단한 Sheet
이 Sheet는 Vapor UI의 Primitive 컴포넌트를 사용하여 유연하게
구성되었습니다.
);
}
```
### Resizable
Sheet의 크기를 자유자재로 조절하길 원한다면 `
```tsx
'use client';
import type { CSSProperties } from 'react';
import { Box, Button, HStack, Sheet, Text, VStack } from '@vapor-ui/core';
import { CloseOutlineIcon } from '@vapor-ui/icons';
type Side = 'right' | 'left' | 'top' | 'bottom';
type Case = {
side: Side;
label: string;
description: string;
/** Resize bounds live in CSS: min/max of the resized axis on the Popup. */
bounds: CSSProperties;
};
const CASES: Case[] = [
{
side: 'right',
label: 'right',
description: '우측 Sheet입니다. 왼쪽 가장자리 핸들을 잡고 좌우로 끌어 너비를 조절하세요.',
bounds: { minWidth: 300, maxWidth: '80vw' },
},
{
side: 'left',
label: 'left',
description: '좌측 Sheet입니다. 오른쪽 가장자리 핸들을 잡고 좌우로 끌어 너비를 조절하세요.',
bounds: { minWidth: 300, maxWidth: '80vw' },
},
{
side: 'top',
label: 'top',
description:
'상단 Sheet입니다. 아래쪽 가장자리 핸들을 잡고 위아래로 끌어 높이를 조절하세요.',
bounds: { height: 360, minHeight: 200, maxHeight: '80svh' },
},
{
side: 'bottom',
label: 'bottom',
description: '하단 Sheet입니다. 위쪽 가장자리 핸들을 잡고 위아래로 끌어 높이를 조절하세요.',
bounds: { height: 360, minHeight: 200, maxHeight: '80svh' },
},
];
export default function ResizableSheet() {
return (
{CASES.map(({ side, label, description, bounds }) => (
{label}
크기 조절 가능한 Sheet ({label})
{description}
))}
);
}
```
## Props Table
***
### Sheet.Root
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open` | `false`, `true` | - | 다이얼로그가 현재 열려 있는지 여부 |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | 다이얼로그의 초기 열림 상태입니다.` | - | 명령형 액션을 위한 ref입니다.`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 열릴 때 포커스할 요소를 결정합니다.`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 닫힐 때 포커스할 요소를 결정합니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 컨테이너 요소입니다. |
| `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 동안 포탈을 DOM에 유지할지 여부 |
#### Sheet.OverlayPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `forceRender` | `false`, `true` | `false` | 다이얼로그가 중첩되어 있어도 백드롭을 강제로 렌더링할지 여부입니다. |
#### Sheet.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` | - | 다이얼로그가 열릴 때 포커스할 요소를 결정합니다.`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 닫힐 때 포커스할 요소를 결정합니다.
```tsx
import { Skeleton } from '@vapor-ui/core';
export default function DefaultSkeleton() {
return
## Property
***
### Shape
Skeleton의 모서리 둥글기를 설정합니다.
```tsx
import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';
export default function SkeletonShape() {
return (
rounded
square
);
}
```
### Animation
Skeleton의 애니메이션 스타일을 설정합니다.
```tsx
import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';
export default function SkeletonAnimation() {
return (
shimmer
pulse
none
);
}
```
### Size
Skeleton의 높이를 설정합니다.
```tsx
import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';
export default function SkeletonSize() {
return (
sm
md
lg
xl
);
}
```
## Examples
***
### Profile Card
여러 Skeleton 요소를 조합하여 프로필 카드 플레이스홀더를 구성하는 예제입니다.
```tsx
import { Box, HStack, Skeleton, VStack } from '@vapor-ui/core';
export default function SkeletonComposition() {
return (
);
}
```
## Props Table
***
### Skeleton
| Prop | Type | Default | Description |
| ----------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
| `animation` | `none`, `shimmer`, `pulse` | `shimmer` | skeleton의 애니메이션 스타일을 제어합니다.
```tsx
import { Spinner } from '@vapor-ui/core';
export default function DefaultSpinner() {
return
## Property
***
### Size
Spinner의 크기를 설정합니다.
```tsx
import { HStack, Spinner, VStack } from '@vapor-ui/core';
export default function SpinnerSize() {
return (
);
}
```
### Color Palette
Spinner의 색상을 설정합니다. 다른 요소와 함께 사용될 때, `inverse` 속성을 사용하여 요소의 글자색과 통일하세요.
```tsx
import { Button, HStack, Spinner } from '@vapor-ui/core';
export default function SpinnerColor() {
return (
);
}
```
## Props Table
***
### Spinner
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| `colorPalette` | `primary`, `inverse` | - | 스피너의 색상을 제어합니다. 다른 요소 안에서 요소의 글자색과 색상을 일치시키려면 `inverse`를 사용하세요. |
| `size` | `md`, `lg`, `xl` | `md` | 스피너의 전체 크기를 제어합니다. |
| `className` | `string \| ((state: Spinner.State) => (string \| undefined))` | - | CSS 클래스를 요소에 적용하거나, 컴포넌트 상태에 따라 클래스를 반환하는 함수를 받습니다. |
| `render` | `ReactElement \| ((props: HTMLProps, state: Spinner.State) => ReactElement)` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다.
```tsx
import { Switch } from '@vapor-ui/core';
export default function DefaultSwitch() {
return
## Property
***
### Size
Switch의 크기를 설정합니다.
```tsx
import { HStack, Switch, Text, VStack } from '@vapor-ui/core';
export default function SwitchSize() {
return (
sm
md
lg
);
}
```
### Checked
Switch의 체크 상태를 설정합니다.
```tsx
import { HStack, Switch, Text, VStack } from '@vapor-ui/core';
export default function SwitchChecked() {
return (
unchecked
checked
);
}
```
### Disabled
Switch의 비활성화 상태를 설정합니다.
```tsx
import { HStack, Switch, Text, VStack } from '@vapor-ui/core';
export default function SwitchDisabled() {
return (
unchecked
checked
);
}
```
### Read Only
사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다.
```tsx
import { HStack, Switch, Text, VStack } from '@vapor-ui/core';
export default function SwitchReadOnly() {
return (
checked
unchecked
);
}
```
## Examples
***
### Controlled
제어되는 Switch 컴포넌트의 사용 예시입니다.
```tsx
'use client';
import { useState } from 'react';
import { HStack, Switch, Text, VStack } from '@vapor-ui/core';
export default function SwitchControlled() {
const [checked, setChecked] = useState(false);
return (
State: {checked ? 'On' : 'Off'}
);
}
```
### Custom Thumb
`children`으로 `Switch.ThumbPrimitive`를 전달하면 내부 파트를 직접 제어할 수 있습니다. 아이콘을 삽입하거나 다른 요소로 교체할 수 있습니다.
```tsx
import { Switch } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function SwitchCustomThumb() {
return (
);
}
```
## Props Table
***
### Switch.Root
| Prop | Type | Default | Description |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg` | - | Switch의 크기를 지정합니다. |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `id` | `string` | - | 스위치 요소의 id |
| `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 |
| `defaultChecked` | `false`, `true` | `false` | 스위치의 초기 활성화 상태` | - | 숨겨진 `<input>` 요소에 접근하기 위한 ref |
| `onCheckedChange` | `(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | 스위치가 활성화되거나 비활성화될 때 호출되는 이벤트 핸들러 |
| `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
```tsx
import { Badge, Table } from '@vapor-ui/core';
const datas = [
{ 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',
};
export default function Basic() {
return (
Name
Status
Role
Last Active
{datas.map((data, index) => (
{data.name}
{data.status.toUpperCase()}
{data.role}
{data['last-active']}
))}
);
}
```
## Props Table
***
### Table.Root
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `table` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Header
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `thead` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Body
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `tbody` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Footer
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `tfoot` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Row
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `tr` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Heading
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `th` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Cell
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `render` | `React.ReactElement` | `td` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.ColumnGroup
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `span` | `string`, `number` | `1` | 열 그룹이 차지하는 너비를 설정합니다. |
| `render` | `React.ReactElement` | `colgroup` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
### Table.Column
| Prop | Type | Default | Description |
| ----------- | -------------------- | ----------- | ------------------------------------------------- |
| `span` | `string`, `number` | `1` | 개별 열 그룹이 차지하는 너비를 설정합니다. |
| `render` | `React.ReactElement` | `col` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. |
| `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. |
| `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. |
# Tabs
URL: /docs/components/tabs
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/tabs.mdx
Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.
***
title: 'Tabs'
site\_name: 'Tabs - Vapor Core'
description: 'Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.'
---------------------------------------------------------------------------------------------------------
```tsx
import { Tabs } from '@vapor-ui/core';
import { AiSmartieIcon, AssignmentIcon, ListIcon } from '@vapor-ui/icons';
export default function DefaultTabs() {
return (
개요
기능
예시
);
}
```
## Property
***
### Size
Tabs의 크기를 지정합니다. `sm`, `md`, `lg`, `xl` 네 가지 크기를 제공합니다.
```tsx
import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';
export default function TabsSize() {
return (
sm
Tab 1
Tab 2
Tab 3
md
Tab 1
Tab 2
Tab 3
lg
Tab 1
Tab 2
Tab 3
xl
Tab 1
Tab 2
Tab 3
);
}
```
### Variant
Tabs의 스타일 변형을 설정합니다. `line`과 `fill` 두 가지 스타일을 제공합니다.
```tsx
import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';
export default function TabsVariant() {
return (
line
Home
About
Services
fill
Home
About
Services
);
}
```
### Orientation
수평(horizontal)과 수직(vertical) 방향을 설정합니다.
```tsx
import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';
export default function TabsOrientation() {
return (
horizontal
Tab 1
Tab 2
Tab 3
vertical
Tab 1
Tab 2
Tab 3
);
}
```
### Controlled State
Tabs의 활성 상태를 외부에서 제어합니다.
```tsx
'use client';
import { useState } from 'react';
import { Button, Tabs, VStack } from '@vapor-ui/core';
export default function TabsControlled() {
const [activeTab, setActiveTab] = useState('profile');
return (
프로필
계정
보안
알림
현재 선택된 탭: {activeTab}
setActiveTab('account')} className="">
계정 탭으로 이동
setActiveTab('security')}
className=""
>
보안 탭으로 이동
);
}
```
### States
개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다.
```tsx
import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';
export default function TabsStates() {
return (
tab disabled
Enabled
Disabled
Normal
group disabled
Enabled
Disabled
Normal
);
}
```
## Examples
***
### Keyboard Navigation
`activateOnFocus`와 `loopFocus` props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다.
```tsx
import { Tabs, VStack } from '@vapor-ui/core';
export default function TabsKeyboard() {
return (
포커스 시 활성화 (activateOnFocus: true)
탭 1
탭 2
탭 3
엔터/스페이스로 활성화 (activateOnFocus: false)
탭 1
탭 2
탭 3
비순환 내비게이션 (loopFocus: false)
탭 1
탭 2
탭 3
);
}
```
### Custom Indicator
`Tabs.ListPrimitive`와 `Tabs.IndicatorPrimitive`를 직접 조합하면 인디케이터의 스타일을 제어할 수 있습니다.
```tsx
import { Tabs } from '@vapor-ui/core';
export default function TabsCustomIndicator() {
return (
홈
소개
서비스
);
}
```
## Props Table
***
### Tabs.Root
| Prop | Type | Default | Description |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `defaultValue` | `any` | `0` | 기본값. 비제어 컴포넌트에서 사용` | - | 커스텀 인디케이터 요소입니다. 기본값은 `<Tabs.IndicatorPrimitive />`입니다. |
#### Tabs.ListPrimitive
| Prop | Type | Default | Description |
| ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `variant` | `line`, `fill` | - | Tabs의 스타일 변형을 지정합니다. |
| `orientation` | `horizontal`, `vertical` | - | 컴포넌트의 방향(레이아웃 흐름 방향)을 지정합니다. |
| `size` | `sm`, `md`, `lg`, `xl` | - | Tabs의 크기를 지정합니다. |
| `disabled` | `false`, `true` | - | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. |
#### Tabs.IndicatorPrimitive
| Prop | Type | Default | Description |
| ----------------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `renderBeforeHydration` | `false`, `true` | `false` | React hydration 전에 렌더링할지 여부입니다.
```tsx
import { TextInput } from '@vapor-ui/core';
export default function DefaultTextInput() {
return
## Property
***
### Size
TextInput의 크기를 설정합니다.
```tsx
import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';
export default function TextInputSize() {
return (
sm
md
lg
xl
);
}
```
### Type
TextInput의 타입을 설정합니다.
```tsx
import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';
export default function TextInputType() {
return (
text
email
password
);
}
```
### Disabled
사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.
```tsx
import { TextInput, VStack } from '@vapor-ui/core';
export default function TextInputDisabled() {
return (
);
}
```
### Invalid
유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)를 표시하여 올바른 입력을 유도합니다.
```tsx
import { TextInput, VStack } from '@vapor-ui/core';
export default function TextInputInvalid() {
return (
);
}
```
### Read Only
값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있는 상태입니다.
```tsx
import { TextInput, VStack } from '@vapor-ui/core';
export default function TextInputReadOnly() {
return (
);
}
```
## Examples
***
### States
TextInput의 다양한 상태를 보여줍니다.
```tsx
import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';
export default function TextInputStates() {
return (
default
disabled
invalid
readOnly
);
}
```
## Props Table
***
### TextInput
| Prop | Type | Default | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `type` | `search`, `text`, `email`, `password`, `url`, `tel` | `text` | 인풋의 타입을 설정합니다. |
| `defaultValue` | `string` | - | |
| `value` | `string` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `onValueChange` | `(value: string, event: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | |
| `invalid` | `false`, `true` | `false` | |
# Text
URL: /docs/components/text
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/text.mdx
Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.
***
title: 'Text'
site\_name: 'Text - Vapor Core'
description: 'Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.'
--------------------------------------------------------------------
```tsx
import { Text } from '@vapor-ui/core';
export default function DefaultText() {
return Hello World ;
}
```
## Property
***
### Typography
텍스트의 타이포그래피 스타일을 설정합니다.
```tsx
import { Text, VStack } from '@vapor-ui/core';
export default function TextTypography() {
return (
Display1
Heading1
Subtitle1
Body1
);
}
```
### Foreground
텍스트의 색상을 설정합니다.
```tsx
import { HStack, Text } from '@vapor-ui/core';
export default function TextForeground() {
return (
Primary
Secondary
Success
Warning
Danger
Hint
);
}
```
## Props Table
***
### Text
| Prop | Type | Default | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
| `textAlign` | `null`, `left`, `right`, `center`, `end`, `start`, `justify`, `match-parent` | - | |
| `foreground` | `white`, `primary-100`, `primary-200`, `secondary-100`, `success-100`, `success-200`, `warning-100`, `warning-200`, `danger-100`, `danger-200`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `secondary-200`, `normal-100`, `normal-200` | `normal-200` | 텍스트의 전경색을 설정합니다. |
| `typography` | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2` | `body2` | 텍스트에 적용할 타이포그래피 스타일을 설정합니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
# Textarea
URL: /docs/components/textarea
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/textarea.mdx
Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.
***
title: 'Textarea'
site\_name: 'Textarea - Vapor Core'
description: 'Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.'
-----------------------------------------------------------------------
```tsx
import { Box, Textarea } from '@vapor-ui/core';
export default function DefaultTextarea() {
return (
);
}
```
## Property
***
### Size
Textarea의 크기를 설정합니다.
```tsx
import { HStack, Text, Textarea, VStack } from '@vapor-ui/core';
export default function TextareaSize() {
return (
sm
md
lg
xl
);
}
```
### Auto Resize
텍스트 내용에 따라 높이가 자동 조절됩니다.
```tsx
import { Box, Textarea } from '@vapor-ui/core';
export default function TextareaAutoResize() {
return (
);
}
```
### States
Textarea의 다양한 상태를 보여줍니다.
```tsx
import { HStack, Text, Textarea, VStack } from '@vapor-ui/core';
export default function TextareaStates() {
return (
default
disabled
invalid
readOnly
);
}
```
## Examples
***
### maxLength
Textarea에 `maxLength` 속성을 추가하여 입력 가능한 최대 문자 수를 제한하는 기능을 제공합니다.
```tsx
import { Box, Textarea } from '@vapor-ui/core';
export default function TextareaCharacterCount() {
return (
);
}
```
## Props Table
***
### Textarea
| Prop | Type | Default | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | Textarea의 크기를 지정합니다. |
| `defaultValue` | `string` | - | Textarea의 초기 값입니다.
```tsx
import { Button, Toast } from '@vapor-ui/core';
const toastManager = Toast.createToastManager();
export default function Default() {
return (
);
}
const App = () => {
const addToast = () => {
toastManager.add({
title: 'This is a toast message!',
description: 'Here is a description for the toast message.',
});
};
return Add Toast ;
};
```
## Property
### Methods
Toast를 추가, 업데이트 및 제거할 수 있습니다.
```tsx
import { Button, HStack, Toast } from '@vapor-ui/core';
const toastManager = Toast.createToastManager();
export default function Method() {
return (
);
}
const App = () => {
const toastManager = Toast.useToastManager();
const addToast = () => {
toastManager.add({
title: 'This is a toast message added by method!',
description: 'Here is a description for the toast message added by method.',
});
};
const updateToast = () => {
const id = toastManager.add({
title: 'This is a toast message to be updated!',
description: 'Here is a description for the toast message to be updated.',
actionProps: {
children: 'Update',
onClick: () => {
toastManager.update(id, {
title: 'Updated!',
colorPalette: 'success',
});
},
},
});
};
const removeToast = () => {
const id = toastManager.add({
title: 'This is a toast message to be removed!',
description: 'Here is a description for the toast message to be removed.',
actionProps: {
children: 'Remove',
onClick: () => {
toastManager.close(id);
toastManager.add({
title: 'Toast removed!',
colorPalette: 'danger',
});
},
},
});
};
const promiseToast = () => {
const fakePromise = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) resolve('Data loaded successfully!');
else reject(new Error('Failed to load data'));
}, 3000);
});
toastManager.promise(fakePromise, {
loading: {
title: 'Loading...',
description: 'Please wait while we load the data.',
colorPalette: 'info',
},
success: {
title: 'Success!',
description: 'The data has been loaded successfully.',
colorPalette: 'success',
},
error: {
title: 'Error!',
description: 'There was an error loading the data.',
colorPalette: 'danger',
},
});
};
return (
Add Toast
Update Toast
Remove Toast
Promise Toast
);
};
```
### ColorPalette
Toast의 색상 팔레트를 설정합니다.
```tsx
import { Button, HStack, Toast } from '@vapor-ui/core';
const toastManager = Toast.createToastManager();
export default function ColorPalette() {
const addToast = (colorPalette: 'info' | 'danger' | 'success') => {
toastManager.add({
title: 'This is a color palette toast message!',
description: 'Here is a description for the color palette toast message.',
colorPalette,
});
};
return (
addToast('info')}>
Info Toast
addToast('danger')}>
Danger Toast
addToast('success')}>
Success Toast
);
}
```
## Examples
### Action
Action 버튼과 함께 사용할 수 있습니다.
```tsx
import { Button, Toast } from '@vapor-ui/core';
const toastManager = Toast.createToastManager();
export default function Action() {
const handleActionToast = () => {
toastManager.add({
title: 'This is an action toast message!',
description: 'Here is a description for the action toast message.',
actionProps: {
children: 'action',
onClick: () => {
alert('Action button clicked!');
},
},
});
};
return (
Action Toast
);
}
```
### Close
Close 버튼을 제거할 수 있습니다.
```tsx
import { Button, Toast } from '@vapor-ui/core';
const toastManager = Toast.createToastManager();
export default function Close() {
const addToast = () => {
toastManager.add({
title: 'This is a toast message without close button!',
description: 'Here is a description for the toast message without close button.',
close: false,
});
};
return (
Wihtout Close Button
);
}
```
### Icon
Icon을 커스텀 할 수 있습니다.
```tsx
import { Button, HStack, Toast } from '@vapor-ui/core';
import { CertificateIcon, HeartIcon, WarningIcon } from '@vapor-ui/icons';
const toastManager = Toast.createToastManager();
export default function Icon() {
const addToast = (
colorPalette: Toast.RootPrimitive.ToastObject['colorPalette'],
icon: Toast.RootPrimitive.ToastObject['icon'],
) => {
toastManager.add({
title: 'This is a color palette toast message!',
description: 'Here is a description for the color palette toast message.',
colorPalette,
icon,
});
};
return (
addToast('info',
addToast('danger',
addToast('success',
);
}
```
### Custom
Toast 아이템을 완전히 커스텀할 수 있습니다.
```tsx
import type { PropsWithChildren } from 'react';
import { Button, HStack, IconButton, Toast, VStack } from '@vapor-ui/core';
import { InfoCircleIcon } from '@vapor-ui/icons';
const toastManager = Toast.createToastManager();
export default function Custom() {
// const { add } = Toast.useToastManager();
const showToast = () => {
const removeToast = (id: string) => {
toastManager.close(id);
};
const id = toastManager.add({
title: 'This is a custom toast message!',
description: 'Here is a description for the custom toast message.',
colorPalette: 'info',
icon:
Show Toast
);
}
const ToastProvider = (props: PropsWithChildren) => {
return (
{props.children}
);
};
const ToastList = () => {
const { toasts } = Toast.useToastManager();
return toasts.map((toast) => {
return (
);
});
};
```
## Props
### Toast.Provider
| Prop | Type | Default | Description |
| ---------------- | -------------- | ------- | ------------------------------------- |
| **toastManager** | `ToastManager` | - | Toast의 상태를 관리하는 ToastManager 인스턴스입니다. |
| `timeout` | `number` | `4000` | Toast가 자동으로 닫히기까지의 시간(밀리초)입니다. |
| `limit` | `number` | - | 동시에 표시할 수 있는 최대 Toast 개수입니다. |
| `children` | `ReactNode` | - | |
### Toast.ProviderPrimitive
| Prop | Type | Default | Description |
| ---------------- | -------------- | ------- | ------------------------------------- |
| **toastManager** | `ToastManager` | - | Toast의 상태를 관리하는 ToastManager 인스턴스입니다. |
| `timeout` | `number` | `4000` | Toast가 자동으로 닫히기까지의 시간(밀리초)입니다. |
| `limit` | `number` | - | 동시에 표시할 수 있는 최대 Toast 개수입니다. |
| `children` | `ReactNode` | - | |
### Toast.PortalPrimitive
| Prop | Type | Default | Description |
| ----------- | ----------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `ReactNode` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 상위 요소입니다. |
### Toast.ViewportPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `ReactNode` | - | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Toast.RootPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| **toast** | `ToastObject` | - | Toast 데이터 객체입니다. `useToastManager` 훅에서 반환된 toasts 배열의 항목을 전달합니다. |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Toast.ContentPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `children` | `ReactNode` | - | |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Toast.TitlePrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Toast.DescriptionPrimitive
| Prop | Type | Default | Description |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
### Toast.ActionPrimitive
| Prop | Type | Default | Description |
| -------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | Action 버튼 크기 |
| `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | Action 버튼 색상 |
| `variant` | `outline`, `fill`, `ghost` | `fill` | Action 버튼 스타일 (fill: 채움, outline: 테두리, ghost: 투명) |
| `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `nativeButton` | `false`, `true` | `true` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.
```tsx
import { Toggle, ToggleGroup } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
} from '@vapor-ui/icons';
export default function DefaultToggleGroup() {
return (
);
}
```
주의!
* `ToggleGroup` 내부의 각 `Toggle`에는 그룹 내에서 고유한 `value` 속성이 필요합니다.
## Property
***
### Size
ToggleGroup의 크기를 지정합니다.
```tsx
import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
} from '@vapor-ui/icons';
const items = [
{ value: 'left', label: '왼쪽 정렬', Icon: AlignLeftOutlineIcon },
{ value: 'center', label: '가운데 정렬', Icon: AlignCenterOutlineIcon },
{ value: 'right', label: '오른쪽 정렬', Icon: AlignRightOutlineIcon },
];
const sizes = ['sm', 'md', 'lg', 'xl'] as const;
export default function ToggleGroupSize() {
return (
{sizes.map((size) => (
{size}
{items.map(({ value, label, Icon }) => (
))}
))}
);
}
```
### Multiple
`multiple`을 `true`로 설정하면 여러 개의 Toggle을 동시에 선택할 수 있습니다.
```tsx
import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';
export default function ToggleGroupMultiple() {
return (
multiple={'{false}'} (기본값)
multiple={'{true}'}
);
}
```
### Disabled
ToggleGroup 전체를 비활성화합니다.
```tsx
import { Toggle, ToggleGroup } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
} from '@vapor-ui/icons';
export default function ToggleGroupDisabled() {
return (
);
}
```
## Examples
***
### Controlled
`value`와 `onValueChange`로 ToggleGroup의 선택 상태를 외부에서 제어할 수 있습니다. 값은 눌린 Toggle의 `value` 배열로 관리됩니다.
```tsx
'use client';
import { useState } from 'react';
import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
} from '@vapor-ui/icons';
export default function ToggleGroupControlled() {
const [value, setValue] = useState(['left']);
const [value2, setValue2] = useState(['left']);
return (
Single
Selected: {value.length > 0 ? value.join(', ') : 'none'}
Multiple
Selected: {value2.length > 0 ? value2.join(', ') : 'none'}
);
}
```
## Props Table
***
### ToggleGroup
| Prop | Type | Default | Description |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | |
| `defaultValue` | `readonly string[]` | - | The pressed state of the toggle group represented by an array of
```tsx
import { Toggle } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function DefaultToggle() {
return (
);
}
```
## Property
***
### Size
Toggle의 크기를 지정합니다.
```tsx
import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function ToggleSize() {
return (
sm
md
lg
xl
);
}
```
### Variant
Toggle의 시각적 위계를 설정합니다.
```tsx
import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function ToggleVariant() {
return (
default
accent
);
}
```
### Pressed
Toggle의 눌림 상태를 지정합니다. 초기 상태는 `defaultPressed`로 설정합니다.
```tsx
import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function TogglePressed() {
return (
unpressed
pressed
);
}
```
### Disabled
Toggle의 비활성화 상태를 지정합니다.
```tsx
import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function ToggleDisabled() {
return (
unpressed
pressed
);
}
```
## Examples
***
### Controlled
`pressed`와 `onPressedChange`로 Toggle의 눌림 상태를 외부에서 제어할 수 있습니다.
```tsx
'use client';
import { useState } from 'react';
import { HStack, Text, Toggle } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function ToggleControlled() {
const [pressed, setPressed] = useState(false);
return (
State: {pressed ? 'On' : 'Off'}
);
}
```
## Props Table
***
### Toggle
| Prop | Type | Default | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | `md` | |
| `variant` | `default`, `accent` | `default` | |
| `defaultPressed` | `boolean` | - | Whether the toggle button is currently pressed.
```tsx
import { type ComponentType, cloneElement, useState } from 'react';
import { Card, Select, Toggle, ToggleGroup, Toolbar, Tooltip } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
BoldOutlineIcon,
ItalicIcon,
StrikeOutlineIcon,
UnderlineOutlineIcon,
} from '@vapor-ui/icons';
export default function DefaultToolbar() {
const [fontFamily, setFontFamily] = useState('');
const [fontSize, setFontSize] = useState();
const handleValueChange = (value: string) => {
const parsedValue = value ? parseInt(value, 10) : NaN;
setFontSize(isNaN(parsedValue) ? 16 : parsedValue);
};
return (
Button 1
Button 2
Button 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
congue, euismod non, mi.
);
}
/* -----------------------------------------------------------------------------------------------*/
type SelectItem = {
value: string;
label: string;
};
const selectItems: SelectItem[] = [
{ value: 'helvetica', label: 'Helvetica' },
{ value: 'Roboto', label: 'Roboto' },
{ value: 'Arial', label: 'Arial' },
{ value: 'Monospace', label: 'Monospace' },
{ value: 'Montserrat', label: 'Montserrat' },
];
interface TooltipButtonProps {
description: React.ReactNode;
children: React.ReactElement;
}
const TooltipButton = ({ description, children, ...props }: TooltipButtonProps) => {
return (
{description}
);
};
/* -----------------------------------------------------------------------------------------------*/
interface AlignSelectProps {
trigger: ComponentType;
items: SelectItem[];
value: string;
onValueChange: (value: string) => void;
placeholder?: string;
}
const AlignSelect = ({
trigger: Trigger,
items,
value,
onValueChange,
placeholder,
}: AlignSelectProps) => {
const [font, setFont] = useState(value);
const handleFontChange = (value: string | null) => {
setFont((prev) => value ?? prev);
onValueChange(value ?? '');
};
const trigger = cloneElement(
{trigger}
{items.map((item) => (
{item.label}
))}
);
};
```
주의!
* `Toolbar.Button`에 `render` prop으로 `Toggle`, `IconButton` 등 다른 컴포넌트를 결합할 수 있습니다.
* 스크린 리더 사용자를 위해 `Toolbar.Root`에 `aria-label`을 지정하세요.
## Property
***
### Size
Toolbar의 크기를 지정합니다. 하위의 `Toolbar.Button`, `Toolbar.Input`에도 함께 적용됩니다.
```tsx
import { HStack, Text, Toggle, Toolbar, VStack } from '@vapor-ui/core';
import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';
const sizes = ['sm', 'md', 'lg', 'xl'] as const;
export default function ToolbarSize() {
return (
{sizes.map((size) => (
{size}
))}
);
}
```
### Variant
Toolbar의 스타일 변형을 지정합니다.
```tsx
import { HStack, Text, Toggle, Toolbar, VStack } from '@vapor-ui/core';
import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';
const variants = ['outline', 'ghost'] as const;
export default function ToolbarVariant() {
return (
{variants.map((variant) => (
{variant}
))}
);
}
```
### Disabled
Toolbar 전체를 비활성화합니다. 하위 아이템도 함께 비활성화됩니다.
```tsx
import { Toggle, Toolbar } from '@vapor-ui/core';
import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';
export default function ToolbarDisabled() {
return (
);
}
```
## Examples
***
### Separator
`Toolbar.Separator`로 관련 있는 아이템 묶음을 시각적으로 구분할 수 있습니다.
```tsx
import { Toggle, ToggleGroup, Toolbar } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
BoldOutlineIcon,
ItalicIcon,
UnderlineOutlineIcon,
} from '@vapor-ui/icons';
export default function ToolbarSeparator() {
return (
);
}
```
### Group
`Toolbar.Group`으로 아이템을 논리적으로 묶어 함께 관리할 수 있습니다. 그룹 단위로 `disabled`를 지정할 수 있습니다.
```tsx
import { Toolbar } from '@vapor-ui/core';
export default function ToolbarGroup() {
return (
실행 취소
다시 실행
잘라내기
복사
붙여넣기
);
}
```
### Input
`Toolbar.Input`으로 툴바 안에 텍스트 입력 필드를 배치할 수 있습니다. `onValueChange`로 입력값 변화를 처리합니다.
```tsx
'use client';
import { useState } from 'react';
import { Toggle, Toolbar } from '@vapor-ui/core';
import { BoldOutlineIcon, ItalicIcon } from '@vapor-ui/icons';
export default function ToolbarInput() {
const [fontSize, setFontSize] = useState('');
return (
);
}
```
## Props Table
***
### Toolbar.Root
| Prop | Type | Default | Description |
| ----------- | -------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size` | `sm`, `md`, `lg`, `xl` | - | |
| `variant` | `outline`, `ghost` | `outline` | |
| `className` | `string \| ((state: Toolbar.Root.State) => (string \| undefined))` | - | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| `disabled` | `boolean` | - | |
| `loopFocus` | `boolean` | - | If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached. |
| `style` | `React.CSSProperties \| ((state: Toolbar.Root.State) => (React.CSSProperties \| undefined))` | - | Style applied to the element, or a function that
```tsx
'use client';
import { HStack, IconButton, Tooltip } from '@vapor-ui/core';
import { AlignCenterOutlineIcon, BoldOutlineIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';
export default function DefaultTooltip() {
return (
Bold
Underline
Align Center
);
}
```
주의!
* **반드시 Button, IconButton 등과 같은 상호작용이 가능한 요소와 함께 사용하세요.** Tooltip은 상호작용 가능한 요소의 동작에 대한 추가 정보를 제공하는 작은 팝업입니다. 상호작용이 불가능한 요소에 사용하거나, 단순히 정보를 제공하기 위한 용도로 사용하려면 `Popover` 컴포넌트를 고려해보세요.
* **Tooltip에 중요한 정보를 포함하지 마세요.** Tooltip은 보조적인 정보를 제공하기 위한 용도로 설계되었으며, 중요한 정보는 포함하지 않는 것이 좋습니다. 중요한 정보는 항상 페이지의 주요 콘텐츠에 포함시켜야 합니다.
## Property
***
### Positioning
Tooltip의 표시 위치를 설정합니다.
```tsx
import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';
export default function TooltipPositioning() {
return (
top
상단} />
상단에 표시되는 툴팁
right
우측} />
우측에 표시되는 툴팁
bottom
하단} />
하단에 표시되는 툴팁
left
좌측} />
좌측에 표시되는 툴팁
);
}
```
### Alignment
Tooltip의 정렬 위치를 설정합니다.
```tsx
import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';
export default function TooltipAlignment() {
return (
Bottom Alignment
start
시작} />
시작 위치에 정렬된 툴팁
center
중앙} />
중앙에 정렬된 툴팁
end
끝} />
끝 위치에 정렬된 툴팁
Right Alignment
start
시작} />
상단 시작 위치
center
중앙} />
중앙 위치
end
끝} />
하단 끝 위치
);
}
```
### Delay
`Tooltip.Trigger`의 `delay` prop으로 Tooltip이 표시되기까지의 지연 시간을 설정합니다.
```tsx
import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';
export default function TooltipDelay() {
return (
0ms
즉시 표시} />
지연 없이 바로 표시되는 툴팁
500ms
0.5초 지연} />
0.5초 후에 표시되는 툴팁
1000ms
1초 지연} />
1초 후에 표시되는 툴팁
2000ms
2초 지연} />
2초 후에 표시되는 툴팁
);
}
```
### Offset
Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다.
```tsx
import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';
export default function TooltipOffset() {
return (
Side Offset
0px
0px} />
거리 0px
10px
10px} />
거리 10px
20px
20px} />
거리 20px
Align Offset
-20px
-20px} />
정렬 오프셋 -20px
0px
0px} />
정렬 오프셋 0px
+20px
+20px} />
정렬 오프셋 +20px
);
}
```
## Examples
***
### Content Variations
다양한 형태의 툴팁 내용을 표시할 수 있습니다.
```tsx
'use client';
import { HStack, IconButton, Text, Tooltip, VStack } from '@vapor-ui/core';
import {
AlignCenterOutlineIcon,
AlignJustifyOutlineIcon,
AlignLeftOutlineIcon,
AlignRightOutlineIcon,
} from '@vapor-ui/icons';
export default function TooltipPopup() {
return (
왼쪽 정렬
왼쪽 정렬
중앙 정렬
중앙 정렬
오른쪽 정렬
오른쪽 정렬
양쪽 정렬
양쪽 정렬
);
}
```
## Props Table
***
### Tooltip.Root
| Prop | Type | Default | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | |
| `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. |
| `open` | `false`, `true` | - | 툴팁이 현재 열려 있는지 여부입니다. |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `defaultOpen` | `false`, `true` | `false` | 툴팁이 초기에 열려 있는지 여부입니다.` | - | 명령형 작업에 대한 ref입니다.`, `ReactPortal` | - | |
| `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. |
| `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨져 있는 동안 포털을 DOM에 유지할지 여부입니다. |
| `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소입니다. |
#### Tooltip.PositionerPrimitive
| Prop | Type | Default | Description |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트 밖으로 스크롤된 후에도 팝업을 뷰포트에 유지할지 여부입니다. |
| `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 앵커 요소입니다.
`@vapor-ui/core`에서 import한 컴포넌트만 변환됩니다. 다른 라이브러리의 동일한 이름의 컴포넌트는
변환되지 않습니다.
* **Git 상태 확인**: uncommitted changes가 있으면 실행되지 않습니다. `--force` 옵션으로 우회할 수 있습니다.
* **Dry Run 권장**: `--dry` 옵션으로 변경 사항을 먼저 확인하세요.
***
## 빠른 시작
별도 설치 없이 `npx`로 실행합니다:
```bash
npx @vapor-ui/codemod v1/migrate ./src
```
이 명령어는 아래의 모든 변환을 한 번에 적용합니다.
### 옵션
| 옵션 | 설명 |
| -------------------- | ---------------------------------------- |
| `--dry` | 변경 사항을 미리보기만 하고 파일에 적용하지 않음 |
| `--force` | Git 안전 검사를 우회하고 강제 실행 |
| `--parser ` | 파서 지정: `babel`, `ts`, `tsx` (기본값: `tsx`) |
| `--extensions ` | 변환할 파일 확장자 (기본값: `tsx,ts,jsx,js`) |
***
## 변환 목록
### `loop` → `loopFocus`
포커스 루프 동작을 제어하는 prop 이름이 변경됩니다.
**대상 컴포넌트:** `Menu`, `Tabs`
```tsx
// Before
Open
...
// After
Open
...
```
```tsx
// Before
...
// After
...
```
***
### `trackAnchor` → `disableAnchorTracking`
앵커 추적 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다.
**대상 컴포넌트:** `Popover`, `Menu`, `Tooltip`
```tsx
// Before
Content
// After
Content
```
```tsx
// Before
...
// After
...
```
표현식에는 `!` 연산자가 자동으로 추가됩니다:
```tsx
// Before
// After
```
***
### `hoverable` → `disableHoverablePopup`
Tooltip 팝업의 hover 가능 여부를 제어하는 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다.
**대상 컴포넌트:** `Tooltip`
```tsx
// Before
Hover me
Content
// After
Hover me
Content
```
```tsx
// Before
// After
```
***
### Hover props를 `Root`에서 `Trigger`로 이동
hover 관련 props가 `Root`에서 `Trigger`로 이동합니다.
**대상 컴포넌트 및 props:**
| Prop | Menu | Popover | Tooltip |
| ------------- | :--: | :-----: | :-----: |
| `openOnHover` | O | O | - |
| `delay` | O | O | O |
| `closeDelay` | O | O | O |
**Menu:**
```tsx
// Before
Open
...
// After
Open
...
```
**Popover:**
```tsx
// Before
Hover
Content
// After
Hover
Content
```
**Tooltip:**
```tsx
// Before
Hover
Content
// After
Hover
Content
```
***
### `onClearErrors` 제거
`Form.Root`에서 `onClearErrors` prop이 제거됩니다. v1에서는 `errors` prop으로 전달한 에러가 필드 값 변경 시 자동으로 클리어됩니다.
**대상 컴포넌트:** `Form`
```tsx
// Before
{
setErrors((prev) => {
const next = { ...prev };
Object.keys(clearedErrors).forEach((name) => delete next[name]);
return next;
});
}}
>
// After
```
***
### `selected` → `current`
현재 선택된 링크를 나타내는 prop 이름이 Breadcrumb API와 일관성을 맞추기 위해 변경됩니다.
**대상 컴포넌트:** `NavigationMenu`
```tsx
// Before
Home
// After
Home
```
```tsx
// Before
Dashboard
// After
Dashboard
```
***
## 고급 사용법
### 여러 변환이 적용되는 경우
```tsx
// Before
import { Menu, Tooltip } from '@vapor-ui/core';
function App() {
return (
<>
Menu
Item 1
Item 2
Hover me
Tooltip content
);
}
// After
import { Menu, Tooltip } from '@vapor-ui/core';
function App() {
return (
<>
Menu
Item 1
Item 2
Hover me
Tooltip content
);
}
```
### Alias import 처리
alias로 import한 컴포넌트도 올바르게 변환됩니다:
```tsx
// Before
import { Menu as VaporMenu } from '@vapor-ui/core';
Open
// After
Open
```
***
## 수동 마이그레이션
codemod로 자동 변환할 수 없는 항목입니다. 직접 검색하여 수정하세요.
### `data-selected` → `data-active`
CSS 선택자에서 사용되는 data attribute가 변경됩니다.
**대상 컴포넌트:** `Tabs`, `NavigationMenu`
기존 Tabs는 상태 이름이 `selected`, `highlighted`, `active`가 혼재되어 있어 "현재 활성 탭"이 무엇인지 직관적이지 않았습니다. v1에서는 `data-active`로 통일합니다.
```css
/* Before */
[data-selected] {
background-color: var(--color-primary);
}
/* After */
[data-active] {
background-color: var(--color-primary);
}
```
CSS 선택자는 컴포넌트 import와 무관하게 사용되므로 codemod로 자동 변환할 수 없습니다.
`data-selected`를 검색하여 직접 수정하세요.
# ESLint Plugin
URL: /docs/getting-started/eslint
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/eslint.mdx
ESLint Plugin Vapor를 사용하여 접근성 규칙을 자동으로 검사하고 코드 품질을 향상시키세요.
***
title: ESLint Plugin
description: ESLint Plugin Vapor를 사용하여 접근성 규칙을 자동으로 검사하고 코드 품질을 향상시키세요.
-----------------------------------------------------------------------
**ESLint Plugin Vapor**는 Vapor UI 컴포넌트의 **접근성 규칙을 자동으로 검사**하여 더 나은 사용자 경험을 보장합니다.
## Why
* Vapor UI 컴포넌트를 사용할 때 자주 발생하는 접근성 문제들을 **개발 단계에서 미리 발견**할 수 있습니다.
* 수동으로 검토하기 어려운 접근성 가이드라인을 **자동으로 체크**합니다. 이제 개발자는 더 나은 코드를 작성하는 데에만 집중할 수 있습니다.
* 웹사이트의 전반적인 사용자 경험을 향상시키고, 더 넓은 사용자층에게 다가갈 수 있습니다.
## Installation
프로젝트에서 사용 중인 패키지 매니저로 플러그인을 설치하세요. `eslint-plugin-vapor`는 eslint-plugin-jsx-a11y, typescript-eslint와 함께 사용할 수 있습니다.
```package-install
npm install --save-dev eslint-plugin-vapor eslint-plugin-jsx-a11y typescript-eslint
```
## Configuration
### Flat Config
ESLint 9.0+ 버전을 사용하는 경우, `eslint.config.js` 파일에 다음과 같이 설정하세요:
```js
import vapor from 'eslint-plugin-vapor';
export default [
{
plugins: {
vapor,
},
rules: {
'vapor/icon-button-has-aria-label': 'error',
'vapor/navigation-has-aria-label': 'error',
},
},
// 또는 recommended 설정 사용
vapor.configs.recommended,
];
```
### Legacy Config
ESLint 8.x 버전을 사용하는 경우, `.eslintrc.js` 파일에 다음과 같이 설정하세요:
```js
module.exports = {
plugins: ['vapor'],
extends: ['plugin:vapor/legacy'],
// 또는 개별 규칙 설정
rules: {
'vapor/icon-button-has-aria-label': 'error',
'vapor/navigation-has-aria-label': 'error',
},
};
```
## Rules
### icon-button-has-aria-label
`IconButton` 컴포넌트에 `aria-label` 속성이 있는지 검사합니다.
```tsx
// ❌
// ✅
```
### navigation-has-aria-label
`NavigationMenu.Root`와 `Breadcrumb.Root` 컴포넌트에 `aria-label` 속성이 있는지 검사합니다.
```tsx
// ❌
...
...
// ✅
...
...
```
### alt-text-on-avatar
`Avatar` 컴포넌트를 이미지로 사용할 때, `src`와 `alt` 속성이 있는지 검사합니다.
```tsx
// ❌
...
// ✅
정보 입력
...
// 또는
...
```
# LLMs.txt
URL: /docs/getting-started/llms-txt
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/llms-txt.mdx
Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법
***
title: LLMs.txt
description: Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법
-------------------------------------------------------------
이 문서에서는 LLMs.txt 파일의 구성과 AI 도구에서 활용하는 방법을 설명합니다.
## LLMs.txt 개요
LLMs.txt는 LLM(Large Language Model)이 Vapor Design System 문서를 이해하도록 구조화한 텍스트 파일입니다. 컨텍스트 창이 제한된 AI 도구에서 핵심 정보를 빠르게 파악할 수 있습니다.
## 파일 구성
| 파일명 | 설명 |
| ------------- | ------------------------------------- |
| llms.txt | 전체 라우트 및 카테고리 개요를 포함한 메인 인덱스 파일 |
| llms-full.txt | 모든 문서(컴포넌트, 가이드, API 등)를 포함한 전체 문서 세트 |
### 인덱스 파일
* [llms.txt](/llms.txt): 각 문서에 대한 요약과 링크를 포함합니다.
* [llms-full.txt](/llms-full.txt): 모든 내용을 포함하며 큰 컨텍스트 워크플로우에 적합합니다.
### 문서 경로
**가이드**
* [/docs/getting-started/installation.mdx](/docs/getting-started/installation.mdx): 설치 가이드
**디자인 토큰**
* [/docs/getting-started/color.mdx](/docs/getting-started/color.mdx): 색상 시스템
* [/docs/getting-started/size.mdx](/docs/getting-started/size.mdx): 크기 및 여백
* [/docs/getting-started/typography.mdx](/docs/getting-started/typography.mdx): 타이포그래피 시스템
**테마**
* [/theme/theme-provider.mdx](/theme/theme-provider.mdx): 테마 설정 가이드
**컴포넌트**
* [/docs/components/\[component-name\].mdx](/docs/components/avatar.mdx): 컴포넌트별 사용법과 API (예: Avatar)
## AI 도구에서 사용
Cursor 등 LLM 기반 코드 도구에서 LLMs.txt 파일을 활용하려면 `@Docs` 기능을 사용합니다.
* [Cursor @Docs 문서](https://docs.cursor.com/context/@-symbols/@-docs)
# Color
URL: /docs/getting-started/color
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/color.mdx
컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
***
title: Color
description: 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
---------------------------------------------------------
| token | value |
| --------------------------------------- | ----------------------------- |
| --vapor-color-canvas | #ffffff |
| --vapor-color-white | #FFFFFF |
| --vapor-color-black | #000000 |
| --vapor-color-gray-025 | #fafafa |
| --vapor-color-gray-050 | #f4f4f4 |
| --vapor-color-gray-100 | #e1e1e1 |
| --vapor-color-gray-200 | #c6c6c6 |
| --vapor-color-gray-300 | #a3a3a3 |
| --vapor-color-gray-400 | #959595 |
| --vapor-color-gray-500 | #767676 |
| --vapor-color-gray-600 | #5d5d5d |
| --vapor-color-gray-700 | #4c4c4c |
| --vapor-color-gray-800 | #393939 |
| --vapor-color-gray-900 | #262626 |
| --vapor-color-red-050 | #fff5f4 |
| --vapor-color-red-100 | #ffd8d7 |
| --vapor-color-red-200 | #ffb3b2 |
| --vapor-color-red-300 | #fc7d7f |
| --vapor-color-red-400 | #f8636a |
| --vapor-color-red-500 | #da3944 |
| --vapor-color-red-600 | #bb1225 |
| --vapor-color-red-700 | #9e0006 |
| --vapor-color-red-800 | #790000 |
| --vapor-color-red-900 | #570000 |
| --vapor-color-pink-050 | #fff5f7 |
| --vapor-color-pink-100 | #ffd8e2 |
| --vapor-color-pink-200 | #ffb1c6 |
| --vapor-color-pink-300 | #f77ca3 |
| --vapor-color-pink-400 | #f26394 |
| --vapor-color-pink-500 | #d13e76 |
| --vapor-color-pink-600 | #b5135d |
| --vapor-color-pink-700 | #9a0047 |
| --vapor-color-pink-800 | #77002d |
| --vapor-color-pink-900 | #550016 |
| --vapor-color-grape-050 | #fcf5fe |
| --vapor-color-grape-100 | #f4d8fb |
| --vapor-color-grape-200 | #e9b4f7 |
| --vapor-color-grape-300 | #d883ef |
| --vapor-color-grape-400 | #d06bea |
| --vapor-color-grape-500 | #b542d1 |
| --vapor-color-grape-600 | #9a1cb7 |
| --vapor-color-grape-700 | #83009f |
| --vapor-color-grape-800 | #62007e |
| --vapor-color-grape-900 | #43005e |
| --vapor-color-violet-050 | #f9f5ff |
| --vapor-color-violet-100 | #ebdbff |
| --vapor-color-violet-200 | #d9b9ff |
| --vapor-color-violet-300 | #b691fa |
| --vapor-color-violet-400 | #a480f7 |
| --vapor-color-violet-500 | #805cec |
| --vapor-color-violet-600 | #693fcf |
| --vapor-color-violet-700 | #5929ba |
| --vapor-color-violet-800 | #4805a3 |
| --vapor-color-violet-900 | #2e007a |
| --vapor-color-blue-050 | #eff8ff |
| --vapor-color-blue-100 | #c6e6ff |
| --vapor-color-blue-200 | #8dcdff |
| --vapor-color-blue-300 | #51a9f7 |
| --vapor-color-blue-400 | #4198f2 |
| --vapor-color-blue-500 | #2A72E5 |
| --vapor-color-blue-600 | #0957c8 |
| --vapor-color-blue-700 | #0043b3 |
| --vapor-color-blue-800 | #002b9b |
| --vapor-color-blue-900 | #000e84 |
| --vapor-color-cyan-050 | #eef9fb |
| --vapor-color-cyan-100 | #c2e8f0 |
| --vapor-color-cyan-200 | #84d2e2 |
| --vapor-color-cyan-300 | #1bb3cc |
| --vapor-color-cyan-400 | #14a3bc |
| --vapor-color-cyan-500 | #04819c |
| --vapor-color-cyan-600 | #006680 |
| --vapor-color-cyan-700 | #00536c |
| --vapor-color-cyan-800 | #003e57 |
| --vapor-color-cyan-900 | #002941 |
| --vapor-color-green-050 | #edfaf4 |
| --vapor-color-green-100 | #bbecd7 |
| --vapor-color-green-200 | #75d9b4 |
| --vapor-color-green-300 | #43b790 |
| --vapor-color-green-400 | #33a782 |
| --vapor-color-green-500 | #058765 |
| --vapor-color-green-600 | #006c4b |
| --vapor-color-green-700 | #00583a |
| --vapor-color-green-800 | #004226 |
| --vapor-color-green-900 | #002e13 |
| --vapor-color-lime-050 | #f1fae8 |
| --vapor-color-lime-100 | #c9eca8 |
| --vapor-color-lime-200 | #9ad84a |
| --vapor-color-lime-300 | #71b61a |
| --vapor-color-lime-400 | #61a613 |
| --vapor-color-lime-500 | #428600 |
| --vapor-color-lime-600 | #276c00 |
| --vapor-color-lime-700 | #115a00 |
| --vapor-color-lime-800 | #004400 |
| --vapor-color-lime-900 | #002e00 |
| --vapor-color-yellow-050 | #fff7e7 |
| --vapor-color-yellow-100 | #ffdd95 |
| --vapor-color-yellow-200 | #fbbd05 |
| --vapor-color-yellow-300 | #d99700 |
| --vapor-color-yellow-400 | #ca8700 |
| --vapor-color-yellow-500 | #a96800 |
| --vapor-color-yellow-600 | #8d4f00 |
| --vapor-color-yellow-700 | #7a3c00 |
| --vapor-color-yellow-800 | #632700 |
| --vapor-color-yellow-900 | #4d1100 |
| --vapor-color-orange-050 | #fff6f1 |
| --vapor-color-orange-100 | #ffd9c8 |
| --vapor-color-orange-200 | #fcb797 |
| --vapor-color-orange-300 | #f4864f |
| --vapor-color-orange-400 | #ef6f25 |
| --vapor-color-orange-500 | #d34701 |
| --vapor-color-orange-600 | #b72100 |
| --vapor-color-orange-700 | #9e0000 |
| --vapor-color-orange-800 | #790000 |
| --vapor-color-orange-900 | #560000 |
| --vapor-color-background-primary-100 | var(--vapor-color-blue-100) |
| --vapor-color-background-primary-200 | var(--vapor-color-blue-500) |
| --vapor-color-background-primary-weak | var(--vapor-color-blue-100) |
| --vapor-color-background-primary | var(--vapor-color-blue-500) |
| --vapor-color-background-secondary-100 | var(--vapor-color-gray-050) |
| --vapor-color-background-secondary-200 | var(--vapor-color-gray-100) |
| --vapor-color-background-secondary-weak | var(--vapor-color-gray-050) |
| --vapor-color-background-secondary | var(--vapor-color-gray-100) |
| --vapor-color-background-success-100 | var(--vapor-color-green-100) |
| --vapor-color-background-success-200 | var(--vapor-color-green-500) |
| --vapor-color-background-success-weak | var(--vapor-color-green-100) |
| --vapor-color-background-success | var(--vapor-color-green-500) |
| --vapor-color-background-warning-100 | var(--vapor-color-orange-100) |
| --vapor-color-background-warning-200 | var(--vapor-color-orange-500) |
| --vapor-color-background-warning-weak | var(--vapor-color-orange-100) |
| --vapor-color-background-warning | var(--vapor-color-orange-500) |
| --vapor-color-background-danger-100 | var(--vapor-color-red-100) |
| --vapor-color-background-danger-200 | var(--vapor-color-red-500) |
| --vapor-color-background-danger-weak | var(--vapor-color-red-100) |
| --vapor-color-background-danger | var(--vapor-color-red-500) |
| --vapor-color-background-hint-100 | var(--vapor-color-gray-100) |
| --vapor-color-background-hint-200 | var(--vapor-color-gray-600) |
| --vapor-color-background-hint-weak | var(--vapor-color-gray-100) |
| --vapor-color-background-hint | var(--vapor-color-gray-600) |
| --vapor-color-background-contrast-100 | var(--vapor-color-gray-300) |
| --vapor-color-background-contrast-200 | var(--vapor-color-gray-800) |
| --vapor-color-background-contrast-weak | var(--vapor-color-gray-500) |
| --vapor-color-background-contrast | var(--vapor-color-gray-800) |
| --vapor-color-background-canvas-100 | var(--vapor-color-canvas) |
| --vapor-color-background-canvas-200 | var(--vapor-color-gray-050) |
| --vapor-color-background-overlay-100 | var(--vapor-color-canvas) |
| --vapor-color-background-canvas-base | var(--vapor-color-white) |
| --vapor-color-background-canvas-sunken | var(--vapor-color-gray-050) |
| --vapor-color-background-canvas-raised | var(--vapor-color-gray-025) |
| --vapor-color-background-canvas-dim | var(--vapor-color-black) |
| --vapor-color-background-canvas-overlay | var(--vapor-color-white) |
| --vapor-color-foreground-primary-100 | var(--vapor-color-blue-600) |
| --vapor-color-foreground-primary-200 | var(--vapor-color-blue-700) |
| --vapor-color-foreground-primary | var(--vapor-color-blue-600) |
| --vapor-color-foreground-primary-strong | var(--vapor-color-blue-700) |
| --vapor-color-foreground-secondary-100 | var(--vapor-color-gray-800) |
| --vapor-color-foreground-secondary-200 | var(--vapor-color-gray-900) |
| --vapor-color-foreground-secondary | var(--vapor-color-gray-700) |
| --vapor-color-foreground-success-100 | var(--vapor-color-green-600) |
| --vapor-color-foreground-success-200 | var(--vapor-color-green-700) |
| --vapor-color-foreground-success | var(--vapor-color-green-600) |
| --vapor-color-foreground-success-strong | var(--vapor-color-green-700) |
| --vapor-color-foreground-warning-100 | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-200 | var(--vapor-color-orange-700) |
| --vapor-color-foreground-warning | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-strong | var(--vapor-color-orange-700) |
| --vapor-color-foreground-danger-100 | var(--vapor-color-red-600) |
| --vapor-color-foreground-danger-200 | var(--vapor-color-red-700) |
| --vapor-color-foreground-danger | var(--vapor-color-red-600) |
| --vapor-color-foreground-danger-strong | var(--vapor-color-red-700) |
| --vapor-color-foreground-hint-100 | var(--vapor-color-gray-600) |
| --vapor-color-foreground-hint-200 | var(--vapor-color-gray-700) |
| --vapor-color-foreground-hint | var(--vapor-color-gray-500) |
| --vapor-color-foreground-contrast-100 | var(--vapor-color-gray-800) |
| --vapor-color-foreground-contrast-200 | var(--vapor-color-gray-900) |
| --vapor-color-foreground-contrast | var(--vapor-color-black) |
| --vapor-color-foreground-normal-100 | var(--vapor-color-gray-700) |
| --vapor-color-foreground-normal-200 | var(--vapor-color-gray-900) |
| --vapor-color-foreground-normal | var(--vapor-color-gray-900) |
| --vapor-color-foreground-inverse | var(--vapor-color-white) |
| --vapor-color-foreground-staticWhite | var(--vapor-color-white) |
| --vapor-color-foreground-staticBlack | var(--vapor-color-black) |
| --vapor-color-border-normal | var(--vapor-color-gray-100) |
| --vapor-color-border-primary | var(--vapor-color-blue-500) |
| --vapor-color-border-secondary | var(--vapor-color-gray-200) |
| --vapor-color-border-success | var(--vapor-color-green-500) |
| --vapor-color-border-warning | var(--vapor-color-orange-500) |
| --vapor-color-border-danger | var(--vapor-color-red-500) |
| --vapor-color-border-hint | var(--vapor-color-gray-600) |
| --vapor-color-border-contrast | var(--vapor-color-gray-800) |
# Size
URL: /docs/getting-started/size
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/size.mdx
요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.
***
title: Size
description: 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.
------------------------------------------------------------
| token | value |
| ----------------------------- | -------- |
| --vapor-size-borderRadius-000 | 0rem |
| --vapor-size-borderRadius-050 | 0.125rem |
| --vapor-size-borderRadius-100 | 0.25rem |
| --vapor-size-borderRadius-200 | 0.375rem |
| --vapor-size-borderRadius-300 | 0.5rem |
| --vapor-size-borderRadius-400 | 0.75rem |
| --vapor-size-borderRadius-500 | 1rem |
| --vapor-size-borderRadius-600 | 1.25rem |
| --vapor-size-borderRadius-700 | 1.5rem |
| --vapor-size-borderRadius-800 | 2rem |
| --vapor-size-borderRadius-900 | 2.5rem |
| --vapor-size-space-000 | 0rem |
| --vapor-size-space-025 | 0.125rem |
| --vapor-size-space-050 | 0.25rem |
| --vapor-size-space-075 | 0.375rem |
| --vapor-size-space-100 | 0.5rem |
| --vapor-size-space-150 | 0.75rem |
| --vapor-size-space-175 | 0.875rem |
| --vapor-size-space-200 | 1rem |
| --vapor-size-space-225 | 1.125rem |
| --vapor-size-space-250 | 1.25rem |
| --vapor-size-space-300 | 1.5rem |
| --vapor-size-space-400 | 2rem |
| --vapor-size-space-500 | 2.5rem |
| --vapor-size-space-600 | 3rem |
| --vapor-size-space-700 | 3.5rem |
| --vapor-size-space-800 | 4rem |
| --vapor-size-space-900 | 4.5rem |
| --vapor-size-dimension-025 | 0.125rem |
| --vapor-size-dimension-050 | 0.25rem |
| --vapor-size-dimension-075 | 0.375rem |
| --vapor-size-dimension-100 | 0.5rem |
| --vapor-size-dimension-150 | 0.75rem |
| --vapor-size-dimension-175 | 0.875rem |
| --vapor-size-dimension-200 | 1rem |
| --vapor-size-dimension-225 | 1.125rem |
| --vapor-size-dimension-250 | 1.25rem |
| --vapor-size-dimension-300 | 1.5rem |
| --vapor-size-dimension-400 | 2rem |
| --vapor-size-dimension-500 | 2.5rem |
| --vapor-size-dimension-600 | 3rem |
| --vapor-size-dimension-700 | 3.5rem |
| --vapor-size-dimension-800 | 4rem |
# Typography
URL: /docs/getting-started/typography
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/typography.mdx
텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.
***
title: Typography
description: 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.
------------------------------------------------------
| token | value |
| ------------------------------------ | ---------- |
| --vapor-typography-fontFamily-sans | Pretendard |
| --vapor-typography-fontFamily-code | FiraCode |
| --vapor-typography-fontSize-025 | 10px |
| --vapor-typography-fontSize-050 | 12px |
| --vapor-typography-fontSize-075 | 14px |
| --vapor-typography-fontSize-100 | 16px |
| --vapor-typography-fontSize-200 | 18px |
| --vapor-typography-fontSize-300 | 20px |
| --vapor-typography-fontSize-400 | 24px |
| --vapor-typography-fontSize-500 | 32px |
| --vapor-typography-fontSize-600 | 38px |
| --vapor-typography-fontSize-700 | 48px |
| --vapor-typography-fontSize-800 | 64px |
| --vapor-typography-fontSize-900 | 80px |
| --vapor-typography-fontSize-1000 | 120px |
| --vapor-typography-fontWeight-400 | regular |
| --vapor-typography-fontWeight-500 | medium |
| --vapor-typography-fontWeight-700 | bold |
| --vapor-typography-fontWeight-800 | extra-bold |
| --vapor-typography-letterSpacing-000 | 0 |
| --vapor-typography-letterSpacing-100 | -0.1px |
| --vapor-typography-letterSpacing-200 | -0.2px |
| --vapor-typography-letterSpacing-300 | -0.3px |
| --vapor-typography-letterSpacing-400 | -0.4px |
| --vapor-typography-lineHeight-025 | 14px |
| --vapor-typography-lineHeight-050 | 18px |
| --vapor-typography-lineHeight-075 | 22px |
| --vapor-typography-lineHeight-100 | 24px |
| --vapor-typography-lineHeight-200 | 26px |
| --vapor-typography-lineHeight-300 | 30px |
| --vapor-typography-lineHeight-400 | 36px |
| --vapor-typography-lineHeight-500 | 48px |
| --vapor-typography-lineHeight-600 | 56px |
| --vapor-typography-lineHeight-700 | 62px |
| --vapor-typography-lineHeight-800 | 84px |
| --vapor-typography-lineHeight-900 | 104px |
| --vapor-typography-lineHeight-1000 | 156px |