> ## 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.
# Galerie der Oberflächenelemente für Mods
> Sehen Sie sich die Oberflächenelemente an, die ein Claude Code-Mod zeichnen kann, etwa Text, Schaltflächen, Felder, Markdown, Code und Diffs, mit Beispielcode und Terminal-Screenshots.
Ein Mod zeichnet seine Oberfläche aus Elementen: Text, Boxen, Schaltflächen, Felder und einige Elemente, die Inhalte für Sie formatieren. Die Beispiele hier zeigen den Code, der ein Element zeichnet, und die meisten enthalten einen Screenshot des Ergebnisses in einem Terminal-Pane, sodass Sie ein Element anhand seines Aussehens auswählen können.
Wie das Zeichnen funktioniert, erfahren Sie zunächst unter [In der Oberfläche zeichnen](/docs/de/plugins/mods/interface). Die wichtigsten Props und welche Apps die einzelnen Elemente zeichnen, finden Sie in der [Elementreferenz](/docs/de/plugins/mods/reference#elements). Die [Typdeklarationen](/docs/de/plugins/mods/create#get-the-types-for-your-build) listen alle Props auf.
Ein Beispiel ausprobieren
Die Beispiele auf dieser Seite sind Codeausschnitte, keine vollständigen Mods. Jedes Beispiel ist der Code für ein Element und alles, was darin verschachtelt ist.
Um ein Beispiel in Ihrem eigenen Terminal zu sehen, erstellen Sie mit den folgenden Schritten den kleinen Mod und fügen Sie das Beispiel darin ein. Der Mod fügt einen Befehl `/gallery` hinzu, der ein Pane öffnet und das Beispiel dort zeichnet. Ein [Pane](/docs/de/plugins/mods/interface#pick-where-to-draw) ist in einem breiten Vollbild-Terminal eine Seitenleiste neben dem Transkript, andernfalls ein umrahmter Bereich über dem Prompt.
Erstellen Sie ein Verzeichnis namens `gallery` mit den Verzeichnissen `.claude-plugin` und `hooks` darin. [Einen Mod erstellen](/docs/de/plugins/mods/create#write-a-mod-yourself) erklärt die Dateien.
Speichern Sie das Manifest als `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" }
}
```
Geben Sie Ihren Einstiegspunkt in `gallery/hooks/hooks.json` an:
```json gallery/hooks/hooks.json theme={null}
{
"modules": ["./register.js"]
}
```
Speichern Sie den Code als `gallery/hooks/register.js`. Er fügt einen Befehl `/gallery` hinzu, der ein Pane öffnet, und zeichnet `Plain text` in diesem Pane:
```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'] })
})
}
```
Starten Sie Claude Code in Ihrer Shell aus dem Verzeichnis, das `gallery` enthält:
```bash theme={null}
claude --plugin-dir ./gallery
```
Führen Sie im Prompt von Claude Code `/gallery` aus. Ein Pane mit `Plain text` darin öffnet sich.
Kopieren Sie ein Beispiel von dieser Seite. Fügen Sie es in `register.js` anstelle von `Text({ children: ['Plain text'] })` ein, sodass es auf `return` folgt, und speichern Sie die Datei. Claude Code lädt das Modul bei jedem Speichern neu, führen Sie also `/gallery` erneut aus, um das neue Beispiel zu sehen.
Ein Element auswählen
Die Beispiele sind danach gruppiert, was Sie auf dem Bildschirm darstellen möchten:
* **[Text anzeigen](#show-text)**: `Text`, `Markdown` und `Link`
* **[Code und Änderungen anzeigen](#show-code-and-changes)**: `Code`
* **[Elemente anordnen](#arrange-elements)**: `Box`
* **[Eingaben entgegennehmen](#take-input)**: `Button`, `Input` und `Select`
* **[Bilder zeichnen](#draw-pictures)**: `Raster`, `Svg`, `Image` und `Client`
Text anzeigen
Drei Elemente bringen Wörter auf den Bildschirm: `Text` für Ihre eigene Gestaltung, `Markdown` für bereits formatierte Inhalte und `Link` für eine URL.
`Text`
`Text` zeichnet eine Zeichenkette mit den Stilen, die Sie angeben. Dieses Beispiel zeigt eine Zeile pro Stil:
```javascript theme={null}
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` zeichnet den Text in Grau. `backgroundColor` füllt nur die Breite des Texts aus.
`Markdown`
`Markdown` formatiert Text so, wie die Antworten von Claude formatiert werden. Übergeben Sie den Inhalt in `text`, nicht in `children`:
```javascript theme={null}
Markdown({
text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})
```
Eine Überschrift wird fett und ohne ihre `#`-Zeichen gezeichnet. Inline-Code wird farbig und ohne seine Backticks gezeichnet. Ein Zitat wird kursiv mit einem Balken links davon gezeichnet.
`Link`
`Link` zeichnet eine Beschriftung, gefolgt von ihrer URL:
```javascript theme={null}
Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })
```
Das Terminal zeichnet die URL als Text nach der Beschriftung. Ob ein Klick sie öffnet, hängt vom Terminal des Benutzers ab.
Code und Änderungen anzeigen
`Code` zeichnet Quelltext mit den eigenen Syntaxfarben von Claude Code oder einen Diff.
`Code`
Geben Sie die `language` an oder übergeben Sie einen `path`, aus dem Claude Code sie ableitet. Mit `startLine` werden die Zeilen ab dieser Nummer nummeriert:
```javascript theme={null}
Code({
language: 'javascript',
startLine: 1,
source: "const name = 'mods'\nconsole.log('hello ' + name)",
})
```
Die Farben stammen aus dem Theme des Benutzers.
`Code` als Diff
Mit `format: 'diff'` besteht `source` aus einem oder mehreren Unified-Diff-Hunks:
```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 zeichnet anstelle der `@@`-Zeile Zeilennummern. Wo sich eine entfernte und eine hinzugefügte Zeile ähneln, werden die geänderten Wörter stärker hinterlegt.
Elemente anordnen
`Box`
`Box` ordnet seinen Inhalt in einer Zeile oder Spalte an und kann einen Rahmen zeichnen. Dieses Beispiel setzt eine Reihe von Wörtern über eine umrahmte Box:
```javascript theme={null}
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'"] })],
}),
],
})
```
Der Rahmen dehnt sich auf die Breite des Panes aus.
Eingaben entgegennehmen
`Button`, `Input` und `Select` sind Steuerelemente: Der Benutzer wechselt mit Tab zwischen ihnen und bedient dasjenige, das den Fokus hat. [Tastaturfokus und Hotkeys](/docs/de/plugins/mods/interface#know-which-keys-your-mod-can-receive) beschreibt, welche Tasten sie erreichen.
Wenn Sie ein Pane mit `focus: true` öffnen, erhält das Pane den Tastaturfokus. Getippte Buchstaben erreichen ein `Input`, sobald es den Fokus hat. Fügen Sie daher `autoFocus: true` zu einem Feld hinzu, das Eingaben annehmen soll, sobald sich das Pane öffnet.
`Button`
Eine Schaltfläche führt `onPress` aus. Dieses Beispiel zeigt die Standardform, eine `plain`-Schaltfläche mit einem Hotkey und eine abgeblendete Schaltfläche:
```javascript theme={null}
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 }),
],
})
```
Eine Schaltfläche mit Fokus wird invertiert gezeichnet. Hier hat der Benutzer zweimal Tab gedrückt:
`Input`
Ein `Input` ist ein einzeiliges Textfeld, das `onSubmit` ausführt, wenn der Benutzer Enter drückt:
```javascript theme={null}
Input({
key: 'title',
label: 'Title',
placeholder: 'Type a title and press Enter',
value: '',
submitLabel: 'save',
onSubmit: noop,
})
```
Ohne Fokus zeigt das Feld seine Beschriftung und seinen Platzhalter:
Mit Fokus wird die Beschriftung fett, ein Cursor erscheint und das `submitLabel` wird nach `⏎` angezeigt:
Durch Tippen wird der Platzhalter ersetzt:
`Select`
Mit einem `Select` kann der Benutzer eine von mehreren Optionen auswählen. Es führt `onSelect` mit dem `value` der Option aus:
```javascript theme={null}
Select({
key: 'format',
label: 'Format',
value: picked,
options: [
{ value: 'md', label: 'Markdown' },
{ value: 'html', label: 'HTML' },
{ value: 'txt', label: 'Plain text' },
],
onSelect: (value) => {
picked = value
},
})
```
Geschlossen zeigt es seine Beschriftung und die aktuelle Option:
Geöffnet listet es seine Optionen auf und markiert eine davon:
Nachdem der Benutzer eine Option ausgewählt hat, schließt sich die Liste:
Bilder zeichnen
`Raster`
Ein `Raster` ist ein Gitter aus farbigen Zeichenzellen, etwa für eine Heatmap, eine Sparkline oder ein Spielbrett. Das Terminal zeichnet es. Dieses Beispiel verwendet die Funktion `cellsOf` aus dem Startermodul, die die Zellen in die Zeichenkette packt, die ein `Raster` erwartet. [Ein Gitter aus farbigen Zellen zeichnen](/docs/de/plugins/mods/interface#draw-a-grid-of-colored-cells) erklärt sie:
```javascript theme={null}
Raster({
key: 'grid',
columns: 3,
rows: 2,
cells: cellsOf([
[['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
[['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
]),
})
```
Ein `Raster` rundet jede Farbe auf eine kleinere Palette, sodass `0x2e7d32` als `#337733` gezeichnet wird.
`Svg`
Ein `Svg` zeichnet ein SVG-Dokument in der Desktop-App:
```javascript theme={null}
Svg({
alt: 'Three bars of rising height',
width: 120,
height: 60,
source:
'',
})
```
Im Terminal öffnet sich ein Pane, das nur ein `Svg` zurückgibt, leer. Um dort etwas anderes zu zeichnen, prüfen Sie [`e.surface`](/docs/de/plugins/mods/interface#pick-where-to-draw) und geben Sie einen anderen Baum zurück.
`Image` und `Client`
Für zwei weitere Elemente gibt es hier kein Beispiel. `Image` zeichnet ein PNG oder Rohpixel im Terminal. `Client` ist ein Bereich, den eine zweite Datei von Ihnen zeichnet, für Animationen und Zeigereingaben. Die [Elementreferenz](/docs/de/plugins/mods/reference#elements) listet ihre Props auf.
Sehen, wo ein Mod zeichnen kann
Alle Beispiele zeichnen in einem Pane. Ein Mod kann auch an anderen Stellen zeichnen und Claude Code aufrufen, um etwas für ihn anzuzeigen:
* **Pane und Band**: [Auswählen, wo gezeichnet wird](/docs/de/plugins/mods/interface#pick-where-to-draw)
* **Die eigenen Zeilen von Claude Code, etwa der Spinner**: [Ändern, was Claude Code bereits zeichnet](/docs/de/plugins/mods/interface#change-what-claude-code-already-draws)
* **Toast, Statuszeile und Log-Zeile**: [Etwas anzeigen, ohne einen Turn zu starten](/docs/de/plugins/mods/api#show-something-without-starting-a-turn)
* **Fragedialog**: [Einen Tool-Aufruf anhalten, bis der Benutzer entscheidet](/docs/de/plugins/mods/events#hold-a-tool-call-until-the-user-decides)
Nächste Schritte
* [In der Oberfläche zeichnen](/docs/de/plugins/mods/interface): Schritt für Schritt ein Pane mit Tabs erstellen
* [Eine Zeichnung testen](/docs/de/plugins/mods/test#test-a-drawing): Ihre Schaltflächen aus einem Test heraus drücken
* [Elementreferenz](/docs/de/plugins/mods/reference#elements): die wichtigsten Props jedes Elements und die Apps, die es zeichnen
`dimColor` zeichnet den Text in Grau. `backgroundColor` füllt nur die Breite des Texts aus.
Eine Überschrift wird fett und ohne ihre `#`-Zeichen gezeichnet. Inline-Code wird farbig und ohne seine Backticks gezeichnet. Ein Zitat wird kursiv mit einem Balken links davon gezeichnet.
Das Terminal zeichnet die URL als Text nach der Beschriftung. Ob ein Klick sie öffnet, hängt vom Terminal des Benutzers ab.
Die Farben stammen aus dem Theme des Benutzers.
Claude Code zeichnet anstelle der `@@`-Zeile Zeilennummern. Wo sich eine entfernte und eine hinzugefügte Zeile ähneln, werden die geänderten Wörter stärker hinterlegt.
Der Rahmen dehnt sich auf die Breite des Panes aus.
Eine Schaltfläche mit Fokus wird invertiert gezeichnet. Hier hat der Benutzer zweimal Tab gedrückt:
Mit Fokus wird die Beschriftung fett, ein Cursor erscheint und das `submitLabel` wird nach `⏎` angezeigt:
Durch Tippen wird der Platzhalter ersetzt:
Geöffnet listet es seine Optionen auf und markiert eine davon:
Nachdem der Benutzer eine Option ausgewählt hat, schließt sich die Liste:
Ein `Raster` rundet jede Farbe auf eine kleinere Palette, sodass `0x2e7d32` als `#337733` gezeichnet wird.