ConnectionCard

Połączone konto albo usługa: kto, jego stan, cichy szczegół i akcje. Wybierz ją dla hostów Git, trackerów albo dowolnych ustawień integracji.

ConnectionCard

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

Noc, podgląd: ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

Wysoki kontrast, podgląd: ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

UżycieLink do sekcji Użycie

tsx

import { ConnectionCard } from '@skribly/ui/ops'

tsx

<ConnectionCard avatar={<VcsBadge kind={a.kind} size={36} />} name={a.name} handle={`@${a.login}`}
  status={a.hasSecret ? { tone: 'ok', label: t('accounts.connected') } : { tone: 'warn', label: t('accounts.noToken') }}
  detail={a.url} actions={<Button size="sm" onPress={() => browse(a)}>{t('accounts.repositories')}</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ść

Element article nazwany swoim nagłówkiem.
Stan jest plakietką z ikoną i słowem.
Podczas sprawdzania karta ustawia aria-busy i pokazuje nazwany wskaźnik.
Długie adresy zawijają się w dowolnym miejscu, a akcje przechodzą pod tekst na wąskiej karcie.

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