Toolbar
관련 컨트롤을 순환 키보드 포커스로 그룹화해요.
핵심 속성
이 Tinyrack 래퍼는 Base UI 동작, React 19 ref, 네이티브 속성, 이벤트와 render 규약을 그대로 유지해요. 플레이그라운드에서는 방향, Root 비활성화, 제어형 토글 상태를 다루고, 아래 예시는 포커스 순환과 개별 비활성화 동작을 보여 줘요. 굵게를 누르면 제어형 미리 보기 인수가 갱신되고, 초기화하면 굵게의 눌림 상태와 모든 컨트롤이 기본값으로 돌아가요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/toolbar.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRToolbar } from '@tinyrack/ui/components/toolbar';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
서식 컨트롤 고유 링크
아이콘 중심 서식 도구 모음이 Base UI의 `render` 규약으로 TRToggle 컨트롤을 조합해요. 모든 아이콘에는 접근 가능한 이름이 있고 모든 Group은 명령 집합의 이름을 가져요.
예시
방향과 비활성 상태 고유 링크
Left/Right는 가로 컨트롤 사이를 이동하고 Up/Down은 세로 도구 모음의 시각적 열을 따라요. 비활성화된 그룹은 활성화를 막으면서도 보이고 이름이 유지돼요.
API
구조
<TRToolbar.Root aria-label="편집기 컨트롤">
<TRToolbar.Group aria-label="서식"><TRToolbar.Button>굵게</TRToolbar.Button></TRToolbar.Group>
<TRToolbar.Separator />
<TRToolbar.Link href="#help">도움말</TRToolbar.Link>
<TRToolbar.Input aria-label="문서 제목" />
</TRToolbar.Root>전체 구조는 Root, Group, Button, Link, Input, Separator예요. 각 파트는 TRToolbar.Part와 이름 있는 TRToolbarPart 내보내기로 제공되며 대응 속성·상태 타입도 내보내요.
Root 속성
| 속성 | 타입 | 기본값 | 용도 |
|---|---|---|---|
orientation | horizontal | vertical | horizontal | 왼쪽·오른쪽 또는 위·아래 방향키 순환 탐색을 선택해요. |
loopFocus | boolean | true | 양 끝에서 키보드 포커스를 순환해요. |
disabled | boolean | false | 도구 모음의 버튼과 입력을 비활성화해요. |
render | ReactElement | function | <div> | 동작과 ref를 보존하면서 Root 요소를 교체해요. |
Group은 이름 있는 group을 렌더링하며 내부 버튼과 입력을 비활성화할 수 있어요. Button은 기본적으로 type="button"이고 focusableWhenDisabled를 지원해요. false이면 비활성화된 명령을 순환 포커스에서 제외해요. Input도 같은 비활성 포커스 정책과 일반 텍스트 편집 키를 유지해요. Link는 의도적으로 항상 탐색할 수 있으므로 비활성화된 Root·Group 안에서도 활성 상태예요. Separator는 Root와 반대 방향이 기본이에요. 가로 도구 모음에서는 Input을 최대 하나만 마지막에 배치하세요.
모든 파트는 className, style, 네이티브 속성, 이벤트 처리기, React 19 ref와 Base UI의 상태 기반 render 규약을 보존해요. 모든 Root와 Group에 접근 가능한 이름을 붙이세요.
모양
| 토큰 | 대체 값 | 용도 |
|---|---|---|
--tr-toolbar-background | --tinyrack-surface | 도구 모음 표면 |
--tr-toolbar-border | --tinyrack-border | 도구 모음 테두리 |
--tr-toolbar-color | --tinyrack-text | 도구 모음 텍스트 |
--tr-toolbar-control-background | transparent | 대기 중인 버튼 표면 |
--tr-toolbar-control-background-hover | --tinyrack-surface-hover | 활성 버튼·링크 호버 |
--tr-toolbar-control-background-pressed | --tinyrack-surface-pressed | 활성·눌림 컨트롤 |
--tr-toolbar-input-background | --tinyrack-surface | 입력 표면 |
--tr-toolbar-input-border | --tinyrack-control-border | 입력 테두리 |
--tr-toolbar-separator-color | --tinyrack-border | 구분선 색상 |
@tinyrack/ui/components/toolbar.css를 명시적으로 가져오세요. 기반 토큰이 밝은·어두운 테마 색상, 기하, 포커스 표시기와 비활성 불투명도를 제공해요.