> ## 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.

# Galeri antarmuka untuk mod

> Lihat elemen antarmuka yang dapat digambar oleh mod Claude Code, seperti teks, tombol, kolom, Markdown, kode, dan diff, beserta contoh kode dan tangkapan layar terminal.

Sebuah mod menggambar antarmukanya dari elemen: teks, kotak, tombol, kolom, dan beberapa elemen yang memformat konten untuk Anda. Contoh-contoh di sini menunjukkan kode yang menggambar sebuah elemen, dan sebagian besar disertai tangkapan layar hasilnya di panel terminal, sehingga Anda dapat memilih elemen berdasarkan tampilannya.

Untuk mempelajari cara kerja penggambaran, mulailah dengan [Menggambar di antarmuka](/docs/id/plugins/mods/interface). Untuk props utama dan aplikasi mana yang menggambar setiap elemen, lihat [referensi elemen](/docs/id/plugins/mods/reference#elements). [Deklarasi tipe](/docs/id/plugins/mods/create#get-the-types-for-your-build) mencantumkan setiap prop.

<h2 id="try-a-sample">
  Mencoba contoh
</h2>

Contoh-contoh di halaman ini adalah cuplikan, bukan mod utuh. Masing-masing adalah kode untuk satu elemen dan apa pun yang bersarang di dalamnya.

Untuk melihat contoh di terminal Anda sendiri, buat mod kecil dengan langkah-langkah berikut dan tempelkan contoh ke dalamnya. Mod ini menambahkan perintah `/gallery` yang membuka panel dan menggambar contoh di sana. [Panel](/docs/id/plugins/mods/interface#pick-where-to-draw) adalah bilah samping di sebelah transkrip pada terminal layar penuh yang lebar, atau wilayah berbingkai di atas prompt jika tidak.

<Steps>
  <Step title="Buat mod">
    Buat direktori bernama `gallery` dengan direktori `.claude-plugin` dan `hooks` di dalamnya. [Membuat mod](/docs/id/plugins/mods/create#write-a-mod-yourself) menjelaskan file-filenya.

    Simpan manifes sebagai `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" }
    }
    ```

    Tentukan titik masuk Anda di `gallery/hooks/hooks.json`:

    ```json gallery/hooks/hooks.json theme={null}
    {
      "modules": ["./register.js"]
    }
    ```

    Simpan kode sebagai `gallery/hooks/register.js`. Kode ini menambahkan perintah `/gallery` yang membuka panel, dan menggambar `Plain text` di panel tersebut:

    ```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'] })
      })
    }
    ```
  </Step>

  <Step title="Jalankan mod">
    Di shell Anda, jalankan Claude Code dari direktori yang berisi `gallery`:

    ```bash theme={null}
    claude --plugin-dir ./gallery
    ```

    Di prompt Claude Code, jalankan `/gallery`. Sebuah panel terbuka dengan `Plain text` di dalamnya.
  </Step>

  <Step title="Ganti dengan contoh">
    Salin contoh dari halaman ini. Di `register.js`, tempelkan contoh tersebut menggantikan `Text({ children: ['Plain text'] })`, sehingga berada setelah `return`, lalu simpan file. Claude Code memuat ulang modul setiap kali Anda menyimpan, jadi jalankan `/gallery` lagi untuk melihat contoh yang baru.
  </Step>
</Steps>

<h2 id="pick-an-element">
  Memilih elemen
</h2>

Contoh-contoh dikelompokkan berdasarkan apa yang ingin Anda tampilkan di layar:

* **[Menampilkan teks](#show-text)**: `Text`, `Markdown`, dan `Link`
* **[Menampilkan kode dan perubahan](#show-code-and-changes)**: `Code`
* **[Mengatur elemen](#arrange-elements)**: `Box`
* **[Menerima input](#take-input)**: `Button`, `Input`, dan `Select`
* **[Menggambar gambar](#draw-pictures)**: `Raster`, `Svg`, `Image`, dan `Client`

<h2 id="show-text">
  Menampilkan teks
</h2>

Tiga elemen menampilkan kata-kata di layar: `Text` untuk gaya Anda sendiri, `Markdown` untuk konten yang sudah diformat, dan `Link` untuk URL.

<h3 id="text">
  `Text`
</h3>

`Text` menggambar string dengan gaya yang Anda berikan. Contoh ini menampilkan satu baris untuk setiap gaya:

```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'"] }),
  ],
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-text-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=90724ce3953d9347b61b6a9266fda451" className="dark:hidden" alt="Panel dengan sembilan baris teks, masing-masing dinamai sesuai gayanya: plain, bold, italic, underline, strikethrough, dimColor berwarna abu-abu, inverse, color merah, dan backgroundColor biru." width="1872" height="490" data-path="images/mods-el-text-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-text-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=790dd3465e06db0842639d0d8fcbbc96" className="hidden dark:block" alt="Panel dengan sembilan baris teks, masing-masing dinamai sesuai gayanya: plain, bold, italic, underline, strikethrough, dimColor berwarna abu-abu, inverse, color merah, dan backgroundColor biru." width="1872" height="490" data-path="images/mods-el-text-dark.png" />

`dimColor` menggambar teks berwarna abu-abu. `backgroundColor` hanya mengisi selebar teks.

<h3 id="markdown">
  `Markdown`
</h3>

`Markdown` memformat teks dengan cara yang sama seperti balasan Claude diformat. Berikan konten di `text`, bukan di `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',
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-markdown-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=e40eacc4e3fbe06eb003f4463f552ec1" className="dark:hidden" alt="Panel dengan judul tebal, Release notes, lalu sebuah kalimat dengan satu kata tebal dan satu kata kode berwarna, daftar dua item, dan kutipan yang digambar miring dengan bilah di sebelah kirinya." width="1872" height="452" data-path="images/mods-el-markdown-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-markdown-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=2cc342ed0c58e752c425fff3c95a33a6" className="hidden dark:block" alt="Panel dengan judul tebal, Release notes, lalu sebuah kalimat dengan satu kata tebal dan satu kata kode berwarna, daftar dua item, dan kutipan yang digambar miring dengan bilah di sebelah kirinya." width="1872" height="452" data-path="images/mods-el-markdown-dark.png" />

Judul digambar tebal tanpa tanda `#`. Kode inline digambar berwarna tanpa backtick. Kutipan digambar miring dengan bilah di sebelah kirinya.

<h3 id="link">
  `Link`
</h3>

`Link` menggambar label diikuti URL-nya:

```javascript theme={null}
Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-link-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=8217bd2dfb561a8ba57023c6d89ea977" className="dark:hidden" alt="Panel dengan satu baris: label Claude Code docs, lalu URL berwarna abu-abu." width="1872" height="186" data-path="images/mods-el-link-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-link-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=cd32f222a7d3530b070f58f5f189a1f8" className="hidden dark:block" alt="Panel dengan satu baris: label Claude Code docs, lalu URL berwarna abu-abu." width="1872" height="186" data-path="images/mods-el-link-dark.png" />

Terminal menggambar URL sebagai teks setelah label. Apakah klik akan membukanya bergantung pada terminal pengguna.

<h2 id="show-code-and-changes">
  Menampilkan kode dan perubahan
</h2>

`Code` menggambar teks sumber dengan warna sintaks milik Claude Code sendiri, atau sebuah diff.

<h3 id="code">
  `Code`
</h3>

Sebutkan `language`, atau berikan `path` agar Claude Code menyimpulkannya. Dengan `startLine`, baris-baris diberi nomor mulai dari angka tersebut:

```javascript theme={null}
Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-code-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=4e13f5d506d3fdcc59d6d9524f48d2a9" className="dark:hidden" alt="Panel dengan dua baris JavaScript bernomor dalam warna sintaks." width="1872" height="224" data-path="images/mods-el-code-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-code-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=59f797371dd91b16b874a382b784b668" className="hidden dark:block" alt="Panel dengan dua baris JavaScript bernomor dalam warna sintaks." width="1872" height="224" data-path="images/mods-el-code-dark.png" />

Warnanya berasal dari tema pengguna.

<h3 id="code-as-a-diff">
  `Code` sebagai diff
</h3>

Dengan `format: 'diff'`, `source` adalah satu atau beberapa hunk 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.',
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-diff-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=4f12c9f7229ceccd9b4f47479a7235dd" className="dark:hidden" alt="Panel dengan diff empat baris. Baris yang dihapus diberi bayangan merah dan baris yang ditambahkan hijau, masing-masing dengan nomor barisnya. Pada baris yang ditambahkan, kata-kata that runs code memiliki bayangan yang lebih kuat." width="1872" height="300" data-path="images/mods-el-diff-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-diff-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=9db96f34381bac8bebc32d41859b8808" className="hidden dark:block" alt="Panel dengan diff empat baris. Baris yang dihapus diberi bayangan merah dan baris yang ditambahkan hijau, masing-masing dengan nomor barisnya. Pada baris yang ditambahkan, kata-kata that runs code memiliki bayangan yang lebih kuat." width="1872" height="300" data-path="images/mods-el-diff-dark.png" />

Claude Code menggambar nomor baris sebagai pengganti baris `@@`. Jika baris yang dihapus dan baris yang ditambahkan mirip, kata-kata yang berubah mendapat bayangan yang lebih kuat.

<h2 id="arrange-elements">
  Mengatur elemen
</h2>

<h3 id="box">
  `Box`
</h3>

`Box` menata isinya dalam baris atau kolom, dan dapat menggambar bingkai. Contoh ini menempatkan sebaris kata di atas kotak berbingkai:

```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'"] })],
    }),
  ],
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-box-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=cb9263bb02f5c8afb6e5b8450e0cdadc" className="dark:hidden" alt="Panel dengan tiga kata dalam satu baris, berjarak empat kolom, lalu satu baris kosong, lalu bingkai membulat di sekitar satu baris teks. Bingkai membentang selebar panel." width="1872" height="338" data-path="images/mods-el-box-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-box-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=dae83407af4d667a58717f68f13848e2" className="hidden dark:block" alt="Panel dengan tiga kata dalam satu baris, berjarak empat kolom, lalu satu baris kosong, lalu bingkai membulat di sekitar satu baris teks. Bingkai membentang selebar panel." width="1872" height="338" data-path="images/mods-el-box-dark.png" />

Bingkai membentang selebar panel.

<h2 id="take-input">
  Menerima input
</h2>

`Button`, `Input`, dan `Select` adalah kontrol: pengguna berpindah di antaranya dengan Tab dan menggunakan kontrol yang sedang memiliki fokus. [Fokus keyboard dan hotkey](/docs/id/plugins/mods/interface#know-which-keys-your-mod-can-receive) menjelaskan tombol mana yang mencapainya.

Membuka panel dengan `focus: true` memberikan fokus keyboard ke panel tersebut. Huruf yang diketik mencapai `Input` setelah kontrol itu memiliki fokus, jadi tambahkan `autoFocus: true` pada kolom yang harus menerima ketikan segera setelah panel terbuka.

<h3 id="button">
  `Button`
</h3>

Sebuah tombol menjalankan `onPress`. Contoh ini menampilkan bentuk default, tombol `plain` dengan hotkey, dan tombol redup:

```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 }),
  ],
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-button-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=8c638c15e12d9736f327dfcaa797b512" className="dark:hidden" alt="Panel dengan tiga tombol, satu per baris: Save dalam kurung siku, n: Next tanpa kurung siku dengan huruf n berwarna, dan Skip dalam kurung siku berwarna abu-abu." width="1872" height="262" data-path="images/mods-el-button-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-button-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=6a88a1fe18ba63b050366dcfab14be45" className="hidden dark:block" alt="Panel dengan tiga tombol, satu per baris: Save dalam kurung siku, n: Next tanpa kurung siku dengan huruf n berwarna, dan Skip dalam kurung siku berwarna abu-abu." width="1872" height="262" data-path="images/mods-el-button-dark.png" />

Tombol yang memiliki fokus digambar dalam video terbalik. Di sini pengguna telah menekan Tab dua kali:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-button-plain-focused-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=a6224e58d10752a894615047d9824ad9" className="dark:hidden" alt="Tiga tombol yang sama, dengan tombol kedua, n: Next, digambar dalam video terbalik." width="1872" height="262" data-path="images/mods-el-button-plain-focused-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-button-plain-focused-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=9aeb7145615e77c84e7436180ed69e86" className="hidden dark:block" alt="Tiga tombol yang sama, dengan tombol kedua, n: Next, digambar dalam video terbalik." width="1872" height="262" data-path="images/mods-el-button-plain-focused-dark.png" />

<h3 id="input">
  `Input`
</h3>

`Input` adalah kolom teks satu baris yang menjalankan `onSubmit` saat pengguna menekan Enter:

```javascript theme={null}
Input({
  key: 'title',
  label: 'Title',
  placeholder: 'Type a title and press Enter',
  value: '',
  submitLabel: 'save',
  onSubmit: noop,
})
```

Tanpa fokus, kolom menampilkan label dan placeholder-nya:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=7d580be1aaf5507032e1962b9167d725" className="dark:hidden" alt="Panel dengan satu baris: label Title, lalu placeholder Type a title and press Enter berwarna abu-abu." width="1872" height="186" data-path="images/mods-el-input-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=9d254a8adc5959ba173717fb45eabd52" className="hidden dark:block" alt="Panel dengan satu baris: label Title, lalu placeholder Type a title and press Enter berwarna abu-abu." width="1872" height="186" data-path="images/mods-el-input-dark.png" />

Dengan fokus, label menjadi tebal, kursor muncul, dan `submitLabel` ditampilkan setelah `⏎`:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-focused-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=dcfcce0174480cc624d06c8521734fe7" className="dark:hidden" alt="Kolom yang sama dengan label tebal, kursor blok pada huruf pertama placeholder, dan tanda return diikuti kata save." width="1872" height="186" data-path="images/mods-el-input-focused-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-focused-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=2f5cf7d0e5f813983070e883009f528e" className="hidden dark:block" alt="Kolom yang sama dengan label tebal, kursor blok pada huruf pertama placeholder, dan tanda return diikuti kata save." width="1872" height="186" data-path="images/mods-el-input-focused-dark.png" />

Mengetik menggantikan placeholder:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-typed-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=4eb6d4443763a21415dad4e426bc747a" className="dark:hidden" alt="Kolom yang sama berisi huruf yang diketik Rel, diikuti tanda return dan kata save." width="1872" height="186" data-path="images/mods-el-input-typed-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-input-typed-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=90fbac3c7a47ab26a4fb71401975eac6" className="hidden dark:block" alt="Kolom yang sama berisi huruf yang diketik Rel, diikuti tanda return dan kata save." width="1872" height="186" data-path="images/mods-el-input-typed-dark.png" />

<h3 id="select">
  `Select`
</h3>

`Select` memungkinkan pengguna memilih salah satu dari beberapa opsi, dan menjalankan `onSelect` dengan `value` dari opsi tersebut:

```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
  },
})
```

Dalam keadaan tertutup, kontrol ini menampilkan label dan opsi saat ini:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=4e3b18268ffd87d2cad06442e6d661a9" className="dark:hidden" alt="Panel dengan satu baris: label Format, opsi saat ini Markdown, dan panah bawah kecil." width="1872" height="186" data-path="images/mods-el-select-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=1e329e6aee748c2dd70e92dbe4960de0" className="hidden dark:block" alt="Panel dengan satu baris: label Format, opsi saat ini Markdown, dan panah bawah kecil." width="1872" height="186" data-path="images/mods-el-select-dark.png" />

Dalam keadaan terbuka, kontrol ini mencantumkan opsinya dan menandai salah satunya:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-moved-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=deb6ce0a49d213235feedaa79ac658c0" className="dark:hidden" alt="Pemilih terbuka, dengan tiga opsinya tercantum di bawah label. Opsi kedua, HTML, digambar dalam video terbalik." width="1872" height="300" data-path="images/mods-el-select-moved-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-moved-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=d69edeecd4f97dad4bdb39b908e3d98e" className="hidden dark:block" alt="Pemilih terbuka, dengan tiga opsinya tercantum di bawah label. Opsi kedua, HTML, digambar dalam video terbalik." width="1872" height="300" data-path="images/mods-el-select-moved-dark.png" />

Setelah pengguna memilih opsi, daftar tertutup:

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-picked-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=f065ab5bc479868f03088dc736f17097" className="dark:hidden" alt="Pemilih tertutup kembali, kini menampilkan HTML sebagai opsi saat ini." width="1872" height="186" data-path="images/mods-el-select-picked-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-select-picked-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=f084630e325825f3831219215a6a595e" className="hidden dark:block" alt="Pemilih tertutup kembali, kini menampilkan HTML sebagai opsi saat ini." width="1872" height="186" data-path="images/mods-el-select-picked-dark.png" />

<h2 id="draw-pictures">
  Menggambar gambar
</h2>

<h3 id="raster">
  `Raster`
</h3>

`Raster` adalah kisi sel karakter berwarna, untuk peta panas, sparkline, atau papan permainan. Terminal yang menggambarnya. Contoh ini menggunakan fungsi `cellsOf` di modul awal, yang mengemas sel-sel ke dalam string yang diterima `Raster`. [Menggambar kisi sel berwarna](/docs/id/plugins/mods/interface#draw-a-grid-of-colored-cells) menjelaskannya:

```javascript theme={null}
Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})
```

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-raster-light.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=5ed719481d3dd45b568bab696e57bf16" className="dark:hidden" alt="Panel dengan kisi kecil blok berwarna, dua baris berisi tiga: hijau, kuning tua, dan merah, lalu hijau, hijau, dan kuning tua." width="1872" height="224" data-path="images/mods-el-raster-light.png" />

<img src="https://mintcdn.com/claude-code/EXkwf0kKMewZsyod/images/mods-el-raster-dark.png?fit=max&auto=format&n=EXkwf0kKMewZsyod&q=85&s=b381f05d4cc99e2abfacb505c77b17f5" className="hidden dark:block" alt="Panel dengan kisi kecil blok berwarna, dua baris berisi tiga: hijau, kuning tua, dan merah, lalu hijau, hijau, dan kuning tua." width="1872" height="224" data-path="images/mods-el-raster-dark.png" />

`Raster` membulatkan setiap warna ke palet yang lebih kecil, sehingga `0x2e7d32` digambar sebagai `#337733`.

<h3 id="svg">
  `Svg`
</h3>

`Svg` menggambar dokumen SVG di aplikasi Desktop:

```javascript theme={null}
Svg({
  alt: 'Three bars of rising height',
  width: 120,
  height: 60,
  source:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="40" width="20" height="20" fill="#2e7d32"/><rect x="50" y="25" width="20" height="35" fill="#f9a825"/><rect x="90" y="5" width="20" height="55" fill="#c62828"/></svg>',
})
```

Di terminal, panel yang hanya mengembalikan `Svg` akan terbuka kosong. Untuk menggambar sesuatu yang lain di sana, periksa [`e.surface`](/docs/id/plugins/mods/interface#pick-where-to-draw) dan kembalikan tree yang berbeda.

<h3 id="image-and-client">
  `Image` dan `Client`
</h3>

Dua elemen lagi tidak memiliki contoh di sini. `Image` menggambar PNG atau piksel mentah di terminal. `Client` adalah wilayah yang digambar oleh file kedua milik Anda, untuk animasi dan input penunjuk. [Referensi elemen](/docs/id/plugins/mods/reference#elements) mencantumkan props-nya.

<h2 id="see-where-a-mod-can-draw">
  Melihat di mana mod dapat menggambar
</h2>

Semua contoh menggambar di panel. Mod juga dapat menggambar di tempat lain, dan memanggil Claude Code untuk menampilkan sesuatu untuknya:

* **Panel dan band**: [Memilih tempat menggambar](/docs/id/plugins/mods/interface#pick-where-to-draw)
* **Baris milik Claude Code sendiri, seperti spinner**: [Mengubah apa yang sudah digambar Claude Code](/docs/id/plugins/mods/interface#change-what-claude-code-already-draws)
* **Toast, baris status, dan baris log**: [Menampilkan sesuatu tanpa memulai giliran](/docs/id/plugins/mods/api#show-something-without-starting-a-turn)
* **Dialog pertanyaan**: [Menahan panggilan tool hingga pengguna memutuskan](/docs/id/plugins/mods/events#hold-a-tool-call-until-the-user-decides)

<h2 id="next-steps">
  Langkah selanjutnya
</h2>

* [Menggambar di antarmuka](/docs/id/plugins/mods/interface): membangun panel dengan tab, langkah demi langkah
* [Menguji gambar](/docs/id/plugins/mods/test#test-a-drawing): menekan tombol Anda dari sebuah pengujian
* [Referensi elemen](/docs/id/plugins/mods/reference#elements): props utama setiap elemen dan aplikasi yang menggambarnya