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