> ## Documentation Index
> Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# mod 界面元素图库
> 查看 Claude Code mod 可以绘制的界面元素，例如文本、按钮、输入框、Markdown、代码和 diff，并附有示例代码和终端截图。
mod 通过元素来绘制界面：文本、框、按钮、输入框，以及几个可为您格式化内容的元素。本页的示例展示了绘制各元素的代码，其中大多数还附有结果在终端窗格中的截图，方便您根据外观来挑选元素。
要了解绘制的工作原理，请从[在界面中绘制](/docs/zh-CN/plugins/mods/interface)开始。有关主要 props 以及哪些应用会绘制各个元素，请参阅[元素参考](/docs/zh-CN/plugins/mods/reference#elements)。[类型声明](/docs/zh-CN/plugins/mods/create#get-the-types-for-your-build)列出了所有 props。
试用示例
本页的示例是代码片段，而非完整的 mod。每个示例都是一个元素及其内部嵌套内容的代码。
要在您自己的终端中查看示例，请按以下步骤创建一个小型 mod，并将示例粘贴进去。该 mod 会添加一个 `/gallery` 命令，用于打开一个窗格并在其中绘制示例。[窗格](/docs/zh-CN/plugins/mods/interface#pick-where-to-draw)在宽屏全屏终端中是会话记录旁边的侧边栏，在其他情况下则是输入框上方带边框的区域。
创建一个名为 `gallery` 的目录，并在其中创建 `.claude-plugin` 和 `hooks` 目录。[创建 mod](/docs/zh-CN/plugins/mods/create#write-a-mod-yourself) 介绍了这些文件。
将清单保存为 `gallery/.claude-plugin/plugin.json`：
```json gallery/.claude-plugin/plugin.json theme={null}
{
"name": "gallery",
"version": "0.1.0",
"description": "Opens a pane that draws one sample",
"author": { "name": "Your Name" }
}
```
在 `gallery/hooks/hooks.json` 中指定入口文件：
```json gallery/hooks/hooks.json theme={null}
{
"modules": ["./register.js"]
}
```
将代码保存为 `gallery/hooks/register.js`。它会添加一个打开窗格的 `/gallery` 命令，并在该窗格中绘制 `Plain text`：
```javascript gallery/hooks/register.js theme={null}
// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'
// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}
export function register(on) {
on('session.start', async ($, e, next) => {
await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
return next(e)
})
on('command.run', { command: 'gallery' }, async ($) => {
await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
return {}
})
on('ui.render', { component: 'Pane' }, async ($, e, next) => {
if (e.requestId !== 'gallery') return next(e)
const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
// Replace the element after return with a sample
return Text({ children: ['Plain text'] })
})
}
```
在 shell 中，从包含 `gallery` 的目录启动 Claude Code：
```bash theme={null}
claude --plugin-dir ./gallery
```
在 Claude Code 输入框中运行 `/gallery`。一个窗格随即打开，其中显示 `Plain text`。
从本页复制一个示例。在 `register.js` 中，将其粘贴以替换 `Text({ children: ['Plain text'] })`，使其位于 `return` 之后，然后保存文件。每次保存时 Claude Code 都会重新加载该模块，因此再次运行 `/gallery` 即可查看新示例。
使用 `format: 'diff'` 时，`source` 是一个或多个 unified diff hunk：
```javascript theme={null}
Code({
format: 'diff',
source: '@@ -1,3 +1,3 @@\n # Mods\n-A mod is a plugin.\n+A mod is a plugin that runs code.\n Read on.',
})
```
Claude Code 用行号代替 `@@` 行进行绘制。当删除的行与添加的行相似时，发生变化的词会以更深的底纹显示。
`dimColor` 以灰色绘制文本。`backgroundColor` 的填充宽度仅与文本相同。
标题以粗体绘制，不显示其 `#` 标记。行内代码以彩色绘制，不显示反引号。引用以斜体绘制，左侧带一条竖线。
终端将 URL 作为文本绘制在标签之后。点击能否打开它取决于用户的终端。
颜色来自用户的主题。
Claude Code 用行号代替 `@@` 行进行绘制。当删除的行与添加的行相似时，发生变化的词会以更深的底纹显示。
边框会延展至窗格的宽度。
获得焦点的按钮以反色绘制。此处用户已按了两次 Tab：
获得焦点后，标签变为粗体，出现光标，并在 `⏎` 之后显示 `submitLabel`：
键入内容会替换占位文本：
展开时，它列出所有选项并标记其中一个：
用户选择一个选项后，列表会收起：
`Raster` 会将每种颜色近似到一个较小的调色板，因此 `0x2e7d32` 会绘制为 `#337733`。