Neumorphism UI
ナビゲーションと開示@neumorphism-ui/toolbar

Toolbar

文書操作をまとめる矢印キーで移動可能なツールバー。 Toolbar に名前を付けます。無効項目にも矢印キーで移動できますが実行はできません。移動対象から外す場合は focusableWhenDisabled={false} を設定します。

@neumorphism-ui/toolbar
Registry JSON

プレビュー

インストール

インストール: toolbarnpx shadcn@latest add @neumorphism-ui/toolbar

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Toolbar の import コード
"use client";

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

Example

Toolbar の使用コード
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 リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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