MarkdownField

Pole tekstowe dla Markdowna z kartą podglądu, do opisów i komentarzy. Wybierz je, gdy tekst będzie pokazywany po wyrenderowaniu; dla krótkich wartości użyj zwykłego TextField.

MarkdownField

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

Noc, podgląd: MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

Wysoki kontrast, podgląd: MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

UżycieLink do sekcji Użycie

tsx

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

tsx

<MarkdownField
  label="Description"
  writeLabel="Write"
  previewLabel="Preview"
  emptyPreview="Nothing to preview yet."
  value={text}
  onChange={setText}
  isInvalid={!text}
  errorMessage="Enter a description."
/>

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

Etykieta nazywa pole tekstowe i listę kart.
Klawisze strzałek przechodzą między kartami Write i Preview, a tekst zostaje po przełączeniu.
Opis i błąd są powiązane przez aria-describedby, a ustawione jest aria-invalid.
Otwarta karta jest oznaczona kształtem, nie tylko kolorem, i pozostaje widoczna w trybie wymuszonych kolorów.

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