PluginRow

Zainstalowana wtyczka albo serwer z przełącznikiem, który działa od razu, jego id, wersją, zakresem i opisem. Druga lista pokazuje stan ładowania.

PluginRow

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Accessibility checks with a name long enough to wrap on a narrow screena11y-checks@community-cataloguev2.0.0-beta.3LocalRuns axe-core and keyboard checks on the page in the preview and reports what fails with the selector, the rule and a suggested fix, ranked by how much it matters to people who use assistive technology.

Reading the plugin catalogue

Noc, podgląd: PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Reading the plugin catalogue

Wysoki kontrast, podgląd: PluginRow

Figmafigma@officialv1.4.0UserReads designs, variables and components from Figma files and turns them into code that fits the project.

Frontend designfrontend-design@officialv0.9.2ProjectGuidance for interfaces with a clear direction, typography that fits and layouts that do not look like a template.

Reading the plugin catalogue

UżycieLink do sekcji Użycie

tsx

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

tsx

<List aria-label={t('plugins.installed')} items={plugins} emptyState={t('plugins.none')}>
  {(p) => <PluginRow id={p.id} title={p.title} identifier={p.id} version={p.version} versionLabel={t('common.version')}
    badges={<Badge size="sm">{t(`scope.${p.scope}`)}</Badge>} description={p.description}
    isEnabled={p.enabled} onEnabledChange={(on) => toggle(p, on)} switchLabel={t('plugins.enable', { name: p.title })}
    isBusy={busy === p.id} busyLabel={t('plugins.updating', { name: p.title })} />}
</List>

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

Przełącznik jest nazwany wtyczką i mówi włączony albo wyłączony; czeka, gdy zmiana trwa, z nazwanym wskaźnikiem obok.
Wynik jest potwierdzany komunikatem typu polite, który zostaje do zamknięcia.
Strzałka w prawo dociera do przełącznika i przycisków; opis jest skrócony tylko na ekranie i odczytywany w całości.

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