计数器

用于导航计数和未读总数的数字计数器，以及侧边栏快速搜索中使用的 Kbd 键盘快捷键提示。

3249115299+1.2k
⌘K⌘L⇧⌘Pesc

安装

你可以通过我们的 CLI 或手动添加这个计数器组件：

已支持深色模式，此 组件 会自动使用 BoardUI 的语义设计变量。 设置主题切换.

CLI 将组件源（及其内部依赖项）复制到您的项目中并安装任何所需的 npm 包。

npx boardui@latest add counter

使用共享 UI 包或自定义导入别名？ 配置您的安装路径 在运行 CLI 之前。复制粘贴示例使用默认导入。

颜色

neutral （默认）位于浅色表面上； primary 针对蓝色渐变表面（如主按钮和选定的导航项目）进行了调整。

<Counter color="neutral">91</Counter> {/* neutral pill (default) */}<Counter color="primary">152</Counter> {/* for primary/gradient surfaces */}

基布德

的 基布德 快捷键提示与计数器形状相同。它是一个独立的注册表项 - 使用以下命令添加 npx boardui add kbd.

⌘L⌘Kesc
import { Kbd } from "@/components/base/kbd/kbd"; <Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>

由 Badge 更名而来

Counter 以前叫 Badge。npx boardui add badge 仍然可用：它会安装 Counter，以及一个将其重新导出为 Badge 的小文件 badge.tsx，因此现有的导入仍然有效。

// Projects that installed it as Badge keep working: badge.tsx re-exports Counterimport { Badge } from "@/components/base/badges/badge"; // New codeimport { Counter } from "@/components/base/badges/counter";