AgentPaneHeader

Wiersz tytułu panelu: pole zaznaczenia, awatar, tytuł, fakty takie jak gałąź, stan i przyciski panelu. Wybierz go wewnątrz AgentPane; w wąskim panelu plakietki i przyciski zawijają się zamiast być ucinane.

AgentPaneHeader

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: AgentPaneHeader

Write migration notes for the new version numbering scheme and the changelog format

notes

Working

Shell

build server

Exited

Noc, podgląd: AgentPaneHeader

Write migration notes for the new version numbering scheme and the changelog format

notes

Working

Shell

build server

Exited

Wysoki kontrast, podgląd: AgentPaneHeader

Write migration notes for the new version numbering scheme and the changelog format

notes

Working

Shell

build server

Exited

UżycieLink do sekcji Użycie

tsx

import { AgentPaneHeader } from '@skribly/ui/agents'

tsx

<AgentPaneHeader
  title={session.title}
  onRename={rename}
  renameLabel={t('rename')}
  selectLabel={t('selectForBroadcast')}
  isSelected={picked}
  onSelectedChange={setPicked}
  avatar={<AgentAvatar letters="C" />}
  state={<SessionStateChip state="working" label={t('state.working')} />}
  actions={<IconButton size="sm" label={t('close')}><X /></IconButton>}
/>

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

Tytuł jest nagłówkiem (domyślnie poziomu 3).
Z onRename jest przyciskiem, który odczytuje tytuł, potem renameLabel; jego naciśnięcie otwiera pole tekstowe, Enter albo opuszczenie zapisuje, Escape anuluje, a fokus wraca na tytuł.
Pole zaznaczenia ma własną nazwę.
Długie tytuły są ucinane na ekranie i odczytywane w całości.
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.