TerminalScreen

Nieruchomy obraz terminala, na przykład ostatnie linie sesji agenta na karcie przeglądu. Wybierz go do podglądu; terminal na żywo wymaga xterm w aplikacji.

TerminalScreen

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

Noc, podgląd: TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

Wysoki kontrast, podgląd: TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

UżycieLink do sekcji Użycie

tsx

import { TerminalScreen } from '@skribly/ui/content'

tsx

<TerminalScreen label="Claude Code session" title="claude · skriblyUI" text={lines} rows={12} showCursor />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Ekran jest nazwaną grupą w kolejności klawisza Tab i przewija się na boki we własnym polu.
Kody kolorów ANSI są usuwane, więc czytniki ekranu dostają zwykły tekst.
Kursor jest dekoracyjny, ukryty przed czytnikami ekranu i miga tylko wtedy, gdy ruch nie jest ograniczony.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.