Neumorphism UI

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} を設定します。

コンポーネントプロパティ型デフォルト説明
Toolbarorientation"horizontal" | "vertical"—配置とキーボード移動の方向を設定します。
ToolbarloopFocusboolean—端でキーボードフォーカスを循環します。
ToolbarButtondisabledboolean—ユーザー操作を無効にします。

アクセシビリティ

  • 01

    Toolbar に名前を付けます。無効項目にも矢印キーで移動できますが実行はできません。移動対象から外す場合は focusableWhenDisabled={false} を設定します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。