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 时保留标签关联和可见焦点。