CodeBlock

Pokazuje blok kodu z opcjonalną nazwą pliku, znacznikiem języka, numerami linii i przyciskiem kopiowania. Dla pojedynczego polecenia wybierz Snippet.

CodeBlock

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

Noc, podgląd: CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

Wysoki kontrast, podgląd: CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

UżycieLink do sekcji Użycie

tsx

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

tsx

<CodeBlock
  code={source}
  label="Example: Save button"
  title="Save.tsx"
  language="tsx"
  copyLabel="Copy"
  copiedLabel="Copied"
  copyFailedLabel="Could not copy"
/>

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

Obszar kodu jest nazwaną grupą w kolejności klawisza Tab, więc użytkownicy klawiatury mogą go przewijać.
Numery linii są ukryte przed czytnikami ekranu i przed zaznaczaniem.
Wynik kopiowania jest pokazany jako ikona i słowo, a region statusu typu polite odczytuje go na głos.
Zostaje widoczny, dopóki wskaźnik lub fokus jest na przycisku.

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