ContainerRow
Jeden kontener ze stanem, obrazem, czasem działania, portami, użyciem zasobów i akcjami. Wybierz go dla listy kontenerów albo usług; przykład zmienia stan, pokazuje zajęty wiersz i potwierdza komunikatem typu polite.
- ContainerRow
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: ContainerRow
Runningweb
docs-web-1Healthynode:26-alpineUp 3 hoursOpen in the browser :5173→51732.4% · 128 MiB (3.1%)Unhealthydb
docs-db-1Unhealthypostgres:18Up 12 minutesOpen in the browser :5432→5432Crashedworker
docs-worker-1Exit code 137registry.example.com/docs/worker-with-a-long-image-name:2026.11.08-build.4512Exited 2 minutes agoPausedcache
docs-cache-1valkey:9PausedOpen in the browser :6379→6379:5353→53/udpStoppedmail
docs-mail-1axllent/mailpitStoppedNoc, podgląd: ContainerRow
Runningweb
docs-web-1Healthynode:26-alpineUp 3 hoursOpen in the browser :5173→51732.4% · 128 MiB (3.1%)Unhealthydb
docs-db-1Unhealthypostgres:18Up 12 minutesOpen in the browser :5432→5432Crashedworker
docs-worker-1Exit code 137registry.example.com/docs/worker-with-a-long-image-name:2026.11.08-build.4512Exited 2 minutes agoPausedcache
docs-cache-1valkey:9PausedOpen in the browser :6379→6379:5353→53/udpStoppedmail
docs-mail-1axllent/mailpitStoppedWysoki kontrast, podgląd: ContainerRow
Runningweb
docs-web-1Healthynode:26-alpineUp 3 hoursOpen in the browser :5173→51732.4% · 128 MiB (3.1%)Unhealthydb
docs-db-1Unhealthypostgres:18Up 12 minutesOpen in the browser :5432→5432Crashedworker
docs-worker-1Exit code 137registry.example.com/docs/worker-with-a-long-image-name:2026.11.08-build.4512Exited 2 minutes agoPausedcache
docs-cache-1valkey:9PausedOpen in the browser :6379→6379:5353→53/udpStoppedmail
docs-mail-1axllent/mailpitStoppedUżycieLink do sekcji Użycie
import { ContainerRow } from '@skribly/ui/ops'<List aria-label={t('docker.containers')} items={containers} emptyState={t('docker.none')}>
{(c) => (
<ContainerRow id={c.id} name={c.service} secondaryName={c.name} state={runState(c)}
stateLabel={t(`docker.state.${runState(c)}`)} image={c.image} status={c.status}
ports={c.ports.map((p) => ({ host: p.hostPort, container: p.containerPort, href: url(p), label: t('docker.openPort') }))}
isBusy={busy === c.id} busyLabel={t('docker.working', { name: c.service })}
actions={<IconButton label={t('docker.restart', { name: c.service })} size="sm" onPress={() => restart(c)}><RotateCw aria-hidden /></IconButton>} />
)}
</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ść
- Lista jest jednym przystankiem w kolejności Tab; klawisze strzałek przesuwają między kontenerami, a strzałka w prawo dociera do linków i przycisków w wierszu.
- Stan jest znakiem o kształcie i słowem, nigdy samym kolorem.
- Linki portów zaczynają nazwę od tego, co widać.
- Zajęty wiersz pokazuje nazwany wskaźnik, a jego przyciski czekają.
- Akcje zawijają się pod tekst w wąskim wierszu, a każdy przycisk ma co najmniej 24 px.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.