Claude Code Mods 界面元素参考文档
Interface gallery for mods
See the interface elements a Claude Code mod can draw, such as text, buttons, fields, Markdown, code, and diffs, with sample code and terminal screenshots.
查看 Claude Code mod 可以绘制的界面元素，例如文本、按钮、字段、Markdown、代码和差异对比，并附带示例代码和终端截图。
A mod draws its interface from elements: text, boxes, buttons, fields, and a few that format content for you. The samples here show the code that draws an element, and most come with a screenshot of the result in a terminal pane, so you can pick an element by how it looks.
mod 从以下元素中绘制其界面：文本、框、按钮、字段以及若干用于格式化内容的元素。本页的示例展示了绘制某个元素的代码，大多数还附带了在终端窗格中的结果截图，以便你根据外观选择元素。
To learn how drawing works, start with Draw in the interface. For the main props and which apps draw each element, see the elements reference. The type declarations list every prop.
要了解绘制的工作原理，请从“界面”中的“绘制”部分开始阅读。有关主要属性及各应用如何绘制每个元素的详细信息，请参阅元素参考文档。类型声明列出了所有属性。
Try a sample
尝试示例
The samples on this page are snippets, not whole mods. Each one is the code for one element and anything nested inside it.
本页上的示例是代码片段，而非完整的 mod。每个示例仅包含一个元素及其内部嵌套内容的代码。
To see a sample in your own terminal, create the small mod in these steps and paste the sample into it. The mod adds a `/gallery` command that opens a pane and draws the sample there. A pane is a sidebar beside the transcript in a wide fullscreen terminal, or a framed region above the prompt otherwise.
要在你自己的终端中查看示例，请按以下步骤创建小型 mod，并将示例代码粘贴其中。该 mod 会添加一个 `/gallery` 命令，用于打开一个窗格并在其中绘制示例内容。窗格是在宽屏全屏终端中转录旁边的侧边栏，否则则是提示符上方的带边框区域。
Create a directory named `gallery` with `.claude-plugin` and `hooks` directories inside it. Create a mod explains the files.
创建一个名为 `gallery` 的目录，并在其中创建 `.claude-plugin` 和 `hooks` 子目录。创建一个 mod 以解释这些文件。
Save the manifest as `gallery/.claude-plugin/plugin.json`:
将清单保存为 `gallery/.claude-plugin/plugin.json`：
{
"name": "gallery",
"version": "0.1.0",
"description": "Opens a pane that draws one sample",
"author": { "name": "Your Name" }
}Name your entry point in `gallery/hooks/hooks.json`:
在 `gallery/hooks/hooks.json` 中指定入口点：
{
"modules": ["./register.js"]
}Save the code as `gallery/hooks/register.js`. It adds a `/gallery` command that opens a pane, and draws `Plain text` in that pane:
将代码保存为 `gallery/hooks/register.js`。它添加了一个 `/gallery` 命令，用于打开一个窗格，并在该窗格中绘制“纯文本”：
// 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'] })
})
}In your shell, start Claude Code from the directory that holds `gallery`:
在你的 shell 中，从包含 `gallery` 的目录启动 Claude Code：
claude --plugin-dir ./galleryAt the Claude Code prompt, run `/gallery`. A pane opens with `Plain text` in it.
在 Claude Code 提示符下，运行 `/gallery`。一个窗格将打开，其中显示“纯文本”。
Copy a sample from this page. In `register.js`, paste it over `Text({ children: ['Plain text'] })`, so that it follows `return`, and save the file. Claude Code reloads the module each time you save, so run `/gallery` again to see the new sample.
从此页复制一个示例。在 `register.js` 中，将其粘贴到 `Text({ children: ['Plain text'] })` 的位置，使其位于 `return` 之后，然后保存文件。Claude Code 会在每次保存时重新加载模块，因此再次运行 `/gallery` 即可查看新示例。
Pick an element
选择一个元素
The samples are grouped by what you want to put on screen:
示例按你想在屏幕上显示的内容进行分组：
* Show text: `Text`, `Markdown`, and `Link` * Show code and changes: `Code` * Arrange elements: `Box` * Take input: `Button`, `Input`, and `Select` * Draw pictures: `Raster`, `Svg`, `Image`, and `Client`
* 显示文本：`Text`、`Markdown` 和 `Link` * 显示代码和变更：`Code` * 排列元素：`Box` * 接收输入：`Button`、`Input` 和 `Select` * 绘制图片：`Raster`、`Svg`、`Image` 和 `Client`
Show text
显示文本
Three elements put words on screen: `Text` for your own styling, `Markdown` for content that's already formatted, and `Link` for a URL.
有三个元素可将文字显示在屏幕上：`Text` 用于自定义样式，`Markdown` 用于已格式化的内容，`Link` 用于 URL。
`Text`
`Text` draws a string with the styles you give it. This sample shows one line for each style:
`Text` 会根据你提供的样式绘制字符串。此示例为每种样式展示一行：
Box({
flexDirection: 'column',
children: [
Text({ children: ['Plain text'] }),
Text({ bold: true, children: ['bold'] }),
Text({ italic: true, children: ['italic'] }),
Text({ underline: true, children: ['underline'] }),
Text({ strikethrough: true, children: ['strikethrough'] }),
Text({ dimColor: true, children: ['dimColor'] }),
Text({ inverse: true, children: ['inverse'] }),
Text({ color: 'red', children: ["color: 'red'"] }),
Text({ backgroundColor: 'blue', children: ["backgroundColor: 'blue'"] }),
],
})`dimColor` draws the text in gray. `backgroundColor` fills only as wide as the text.
`dimColor` 以灰色绘制文本。`backgroundColor` 仅填充与文本等宽的宽度。
`Markdown`
`Markdown` formats text the way Claude's replies are formatted. Pass the content in `text`, not in `children`:
`Markdown` 以 Claude 回复的格式对文本进行格式化。将内容放在 `text` 中，而不是 `children` 中：
Markdown({
text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})A heading draws in bold without its `#` marks. Inline code draws in color without its backticks. A quote draws in italics with a bar on its left.
标题会以粗体显示，但不包含其 `#` 标记。行内代码会以彩色显示，但不包含其反引号。引用会以斜体显示，并在左侧带有一条竖线。
`Link`
`Link` draws a label followed by its URL:
`Link` 会显示标签后跟其 URL：
Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })The terminal draws the URL as text after the label. Whether a click opens it depends on the user's terminal.
终端会在标签后以文本形式显示 URL。点击是否打开它取决于用户的终端。
Show code and changes
显示代码和更改
`Code` draws source text with Claude Code's own syntax colors, or a diff.
`Code` 会使用 Claude Code 自身的语法着色来显示源代码文本，或显示差异（diff）。
`Code`
Name the `language`, or pass a `path` for Claude Code to infer it from. With `startLine`, the lines are numbered from that number:
指定 `language`，或传递一个 `path` 让 Claude Code 从中推断语言。使用 `startLine` 时，行号将从该数字开始编号：
Code({
language: 'javascript',
startLine: 1,
source: "const name = 'mods'\nconsole.log('hello ' + name)",
})The colors come from the user's theme.
颜色来自用户的主题。
`Code` as a diff
`Code` 作为差异（diff）
With `format: 'diff'`, `source` is one or more unified diff hunks:
使用 `format: 'diff'` 时，`source` 是一个或多个统一差异块（unified diff hunks）：
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 draws line numbers in place of the `@@` line. Where a removed line and an added line are alike, the words that changed get a stronger shade.
Claude Code 会用行号替换 `@@` 行。在删除的行和添加的行相似的地方，发生变化的单词会显示为更深的色调。
Arrange elements
排列元素
`Box`
`Box` lays out what's inside it in a row or a column, and can draw a border. This sample puts a row of words above a bordered box:
`Box` 将其内部的内容按行或列布局，并可以绘制边框。此示例在一行文字上方放置了一个带边框的框：
Box({
flexDirection: 'column',
gap: 1,
children: [
Box({
flexDirection: 'row',
columnGap: 4,
children: [Text({ children: ['a row'] }), Text({ children: ['of three'] }), Text({ children: ['items'] })],
}),
Box({
borderStyle: 'round',
paddingX: 1,
children: [Text({ children: ["borderStyle: 'round'"] })],
}),
],
})The border stretches to the width of the pane.
边框会延伸至窗格的宽度。
Take input
获取输入
`Button`, `Input`, and `Select` are controls: the user moves between them with Tab and uses the one that has the focus. Keyboard focus and hotkeys covers which keys reach them.
`Button`、`Input` 和 `Select` 是控件：用户通过 Tab 键在这些控件之间切换，并使用当前获得焦点的那个控件。键盘焦点与快捷键部分介绍了哪些按键能作用于它们。
Opening a pane with `focus: true` gives the pane keyboard focus. Typed letters reach an `Input` once it has the focus, so add `autoFocus: true` to a field that should take typing as soon as the pane opens.
使用 `focus: true` 打开窗格会使该窗格获得键盘焦点。一旦 `Input` 获得焦点，输入的字母就会进入其中，因此对于应在窗格打开后立即接收输入的字段，请添加 `autoFocus: true`。
`Button`
A button runs `onPress`. This sample shows the default form, a `plain` button with a hotkey, and a dim one:
按钮运行 `onPress`。此示例展示了默认样式、带有快捷键的 `plain` 按钮以及一个变暗的按钮：
Box({
flexDirection: 'column',
children: [
Button({ key: 'save', label: 'Save', onPress: noop }),
Button({ key: 'next', label: 'Next', hotkey: 'n', plain: true, onPress: noop }),
Button({ key: 'skip', label: 'Skip', dimColor: true, onPress: noop }),
],
})A button that has the focus draws in inverse video. Here the user has pressed Tab twice:
获得焦点的按钮会以反色显示。此处用户按了两次 Tab 键：
`Input`
An `Input` is a one-line text field that runs `onSubmit` when the user presses Enter:
`Input` 是一个单行文本字段，当用户按下 Enter 键时触发 `onSubmit`：
Input({
key: 'title',
label: 'Title',
placeholder: 'Type a title and press Enter',
value: '',
submitLabel: 'save',
onSubmit: noop,
})Without the focus, the field shows its label and its placeholder:
失去焦点时，该字段显示其标签和占位符：
With the focus, the label turns bold, a cursor appears, and the `submitLabel` shows after `⏎`:
获得焦点时，标签变为粗体，出现光标，且 `submitLabel` 显示在 `⏎` 之后：
Typing replaces the placeholder:
输入内容会替换掉占位符：
`Select`
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力