跳到正文

组件

可在 MDX 中使用的组件清单,含安装命令与各自参考页。

Nimbus 的组件既是页面构件,也是可以修改的源码。内置组件已经注册好,可以直接写进 .mdx;其余组件先用 CLI 安装,再按需注册。

组件清单

组件 用途 引入方式
Accordion 折叠卡片,展开后显示内容 nimbus-docs add accordion
Aside note、tip、caution、danger 提示框 默认可用
Badge 状态或分类小标签 nimbus-docs add badge
Banner 站点公告条,可关闭并记住选择 nimbus-docs add banner
Breadcrumbs 指向当前页面的层级路径 nimbus-docs add breadcrumbs
Button 操作按钮,含变体、尺寸与形状 nimbus-docs add button
Card 带图标、标题与内容的卡片 默认可用
CardGrid 卡片的自适应网格 默认可用
Code 从字符串渲染语法高亮代码块 nimbus-docs add code
CodeGroup 带标签页的代码块组 nimbus-docs add code-group
Collapsible 单个可折叠面板 nimbus-docs add collapsible
CopyPrompt 带复制按钮的一行提示词 nimbus-docs add copy-prompt
Dialog 基于原生 <dialog> 的模态框 nimbus-docs add dialog
Embed 锁定比例的 iframe 容器 nimbus-docs add embed
FileTree 用嵌套列表书写的目录树 nimbus-docs add file-tree
Frame 截图与媒体的带边框容器 nimbus-docs add frame
Icon 站点图标系统 从 @cloudflare/nimbus-docs/components/Icon.astro 引入
Image zoom 点击放大图片 nimbus-docs add image-zoom
LayerCard 带层级的卡片容器 nimbus-docs add layer-card
LinkButton 链接样式的按钮 nimbus-docs add link-button
LinkCard 链接卡片 nimbus-docs add link-card
PackageManagers 多包管理器安装命令 默认可用
PageActions 页面操作栏 nimbus-docs add page-actions
Pagination 上一页 / 下一页 nimbus-docs add pagination
Popover 弹出层 nimbus-docs add popover
Search 站内搜索 nimbus-docs add search
Sidebar 侧边栏导航 nimbus-docs add sidebar
Steps 编号步骤 默认可用
Tabs 标签页 默认可用
ThemeToggle 明暗主题切换 nimbus-docs add theme-toggle
TOC 本页内容目录 nimbus-docs add toc

Steps、Tabs、PackageManagers、Render 等组件也已默认注册,可直接使用。

安装

nimbus-docs add accordion

命令会把组件源码写入 src/components/ui/<slug>/,并补齐注册表依赖。安装后的组件和其他源码一样,可以直接修改外观与行为。

注册

组件只有在 src/components.ts 中列出后,才能在任意 .mdx 里免导入使用:

src/components.tsts
import { Badge } from "./components/ui/badge";

export const components = {
  Badge,
};

也可以只在单个文件顶部导入。未注册、也未导入的 PascalCase 标签会让构建失败,详见 Markdown 与 MDX。

输入以搜索…

↑↓ 导航↵ 选择Esc 关闭