OutputBox

Wyjście programu, takie jak log instalacji lub budowania, z opcjonalnym wynikiem. Wybierz go dla tekstu, który wypisało narzędzie; dla kodu źródłowego wybierz CodeBlock.

OutputBox

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

Noc, podgląd: OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

Wysoki kontrast, podgląd: OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

UżycieLink do sekcji Użycie

tsx

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

tsx

<OutputBox
  label="Install output"
  title="npm install"
  text={output}
  isRunning={running}
  runningLabel="Running"
  status={{ tone: 'ok', label: 'Done' }}
/>

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ść

Wynik ma kolor, ikonę i słowo.
Nagłówek jest regionem statusu typu polite, więc zmiana z „w toku” na „gotowe” jest odczytana raz, a nie przy każdej linii.
Wyjście trzyma najnowszą linię w widoku, chyba że przewiniesz w górę, a pole jest w kolejności klawisza Tab, aby dało się je przewijać z klawiatury.

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