Toolbar
core툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.
컴포넌트 의존 관계
깊이
100%
기본 사용
포커스 순환
테스트 커버리지
2026년 2월 4일1/1 통과
1성공
0실패
1전체
- 버튼들을 렌더링한다
ToolbarRoot Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
focusLoop | boolean | false | 포커스 순환 여부 |
ToolbarContainer Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | ToolbarButton/Separator 요소들 |
className | string | — | 기본 스타일 오버라이드 |
ToolbarButton Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 버튼 내용 |
onClick | () => void | — | 클릭 핸들러 |
className | string | — | 기본 스타일 오버라이드 |
ToolbarSeparator Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
className | string | — | 기본 스타일 오버라이드 |
TooltipAnchor Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
render | ReactElement | — | 앵커로 사용할 요소 |
children | ReactNode | — | 앵커 내용 |
Tooltip Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 툴팁 내용 |
className | string | — | 기본 스타일 오버라이드 |
Import
tsx
import {
ToolbarRoot,
ToolbarContainer,
ToolbarButton,
ToolbarSeparator,
TooltipProvider,
TooltipAnchor,
Tooltip,
} from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| ← → | 버튼 간 탐색 |
| Enter / Space | 버튼 활성화 |
| Home | 첫 번째 버튼으로 이동 |
| End | 마지막 버튼으로 이동 |