Toolbar

편집기나 문서에서 자주 쓰는 명령을 작은 도구 모음으로 모을 때 사용합니다.

미리보기

문서 작업 도구

실행 취소와 비활성 다시 실행을 저장 버튼 옆에 묶고 로컬 동작 결과를 표시합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/toolbar

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

Toolbar에 이름을 제공하고 관련 ToolbarButton을 그룹으로 묶으세요. ToolbarSeparator로 묶음을 나누고 사용할 수 없는 동작은 disabled로 표시합니다.

"use client";

import { Toolbar, ToolbarGroup, ToolbarLink, ToolbarSeparator } from "@/components/ui/toolbar";

export default function Example() {
  return (
    <Toolbar aria-label="Document tools">
      <ToolbarGroup><ToolbarLink href="/documents">Documents</ToolbarLink></ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarLink href="/settings">Settings</ToolbarLink>
    </Toolbar>
  );
}

API 레퍼런스

문서 작업을 한 곳에 묶는 방향키 탐색 도구 모음. Toolbar에 이름을 제공하세요. 비활성 항목도 기본적으로 방향키로 탐색되지만 실행되지 않습니다. 필요하면 focusableWhenDisabled={false}로 탐색에서 제외하세요.

컴포넌트	속성	타입	기본값	설명
`Toolbar`	`orientation`	`"horizontal" \| "vertical"`	`—`	배치 방향과 키보드 이동 방향입니다.
`Toolbar`	`loopFocus`	`boolean`	`—`	끝에서 처음으로 키보드 포커스를 순환합니다.
`ToolbarButton`	`disabled`	`boolean`	`—`	사용자 조작을 비활성화합니다.

미리보기

문서 작업 도구

설치

사용법

API 레퍼런스

접근성