PullRequestCard

Pull request bieżącej gałęzi albo następny krok do niego: zainstaluj narzędzie, zaloguj się, a potem utwórz. Każdy stan ma własną ikonę, kolor i słowo. Przejdź przez kroki w przykładzie.

PullRequestCard

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: PullRequestCard

Setup neededOpen pull requests from here with the GitHub CLI.

No pull requestKeep the sidebar open on wide screens after a reload

Draft#97 Keep the sidebar open on wide screens after a reload

Open#97 Keep the sidebar open on wide screens after a reload

Merged#97 Keep the sidebar open on wide screens after a reload

Closed#97 Keep the sidebar open on wide screens after a reload

Noc, podgląd: PullRequestCard

Setup neededOpen pull requests from here with the GitHub CLI.

No pull requestKeep the sidebar open on wide screens after a reload

Draft#97 Keep the sidebar open on wide screens after a reload

Open#97 Keep the sidebar open on wide screens after a reload

Merged#97 Keep the sidebar open on wide screens after a reload

Closed#97 Keep the sidebar open on wide screens after a reload

Wysoki kontrast, podgląd: PullRequestCard

Setup neededOpen pull requests from here with the GitHub CLI.

No pull requestKeep the sidebar open on wide screens after a reload

Draft#97 Keep the sidebar open on wide screens after a reload

Open#97 Keep the sidebar open on wide screens after a reload

Merged#97 Keep the sidebar open on wide screens after a reload

Closed#97 Keep the sidebar open on wide screens after a reload

UżycieLink do sekcji Użycie

tsx

import { PullRequestCard } from '@skribly/ui/code'

tsx

<PullRequestCard state="open" stateLabel={t('pr.open')} number="#128"
  title={pr.title} description={`${branch} → ${base}`} href={pr.url} />

<PullRequestCard state="none" stateLabel={t('pr.none')} title={t('pr.pushed', { base })}
  action={<Button size="sm" onPress={create} isPending={creating}>{t('pr.create')}</Button>} />

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

Stan jest słowem w plakietce, nigdy tylko kolorem ikony.
Tytuł jest linkiem, gdy ustawiono href, i się zawija zamiast być ucinany.
Gdy akcja trwa, karta ustawia aria-busy, a jej przycisk mówi, że trwa oczekiwanie.
Przekaż openInNewTab tylko wtedy, gdy tekst mówi, że link otwiera nową kartę.

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