> ## 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、程式碼和差異，並附有範例程式碼和終端機螢幕截圖。
Mod 使用元素來繪製其介面：文字、方塊、按鈕、欄位，以及一些會替您格式化內容的元素。此處的範例展示了繪製元素的程式碼，大多數範例還附有在終端機窗格中呈現結果的螢幕截圖，讓您可以依外觀挑選元素。
若要了解繪製的運作方式，請從[在介面中繪製](/docs/zh-TW/plugins/mods/interface)開始。如需主要 props 以及哪些應用程式會繪製各個元素，請參閱[元素參考](/docs/zh-TW/plugins/mods/reference#elements)。[型別宣告](/docs/zh-TW/plugins/mods/create#get-the-types-for-your-build)列出了所有 props。
試用範例
本頁的範例是程式碼片段，而非完整的 mod。每個範例都是一個元素及其內部巢狀內容的程式碼。
若要在您自己的終端機中查看範例，請依照以下步驟建立小型 mod，並將範例貼入其中。此 mod 會新增一個 `/gallery` 命令，開啟一個窗格並在其中繪製範例。[窗格](/docs/zh-TW/plugins/mods/interface#pick-where-to-draw)在寬版全螢幕終端機中是逐字稿旁的側邊欄，否則則是提示詞上方的框線區域。
建立一個名為 `gallery` 的目錄，並在其中建立 `.claude-plugin` 和 `hooks` 目錄。[建立 mod](/docs/zh-TW/plugins/mods/create#write-a-mod-yourself) 說明了這些檔案。
將 manifest 儲存為 `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 區塊：
```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`。