탐색과 공개@neumorphism-ui/toolbar

Toolbar

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

@neumorphism-ui/toolbar

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/toolbar

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";

import * as React from "react";
import { Toolbar, ToolbarGroup, ToolbarButton, ToolbarSeparator } from "@/components/ui/toolbar";

Example

export default function Example() {
  const [message, setMessage] = React.useState("");
  return (<div className="grid gap-3"><Toolbar aria-label={"문서 도구"}><ToolbarGroup><ToolbarButton onClick={() => setMessage("실행 취소")}>{"실행 취소"}</ToolbarButton><ToolbarButton disabled>{"다시 실행"}</ToolbarButton></ToolbarGroup><ToolbarSeparator /><ToolbarButton onClick={() => setMessage("로컬 예제를 저장했습니다.")}>{"변경 저장"}</ToolbarButton></Toolbar><p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p></div>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성