Desktop app layout

Rama aplikacji desktopowej: pasek tytułu, pasek aktywności, pasek stanu i dok na panel boczny, taki jak czat agenta. Wybierz Dock dla panelu, który stoi obok dowolnego widoku i można zmieniać jego rozmiar albo go zamykać.

Titlebar
Dock

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Desktop app layout

Skribly Agent

Agents

Sessions in this project.

main1 working · 2 waiting

Noc, podgląd: Desktop app layout

Skribly Agent

Agents

Sessions in this project.

main1 working · 2 waiting

Wysoki kontrast, podgląd: Desktop app layout

Skribly Agent

Agents

Sessions in this project.

main1 working · 2 waiting

UżycieLink do sekcji Użycie

tsx

import { Titlebar, Dock } from '@skribly/ui/shell'

tsx

<AppLayout skipLinkLabel="Skip to content" titlebar={<Titlebar brand={…} actions={…} />}
  activityBar={<ActivityBar label="Views">…</ActivityBar>} statusBar={<StatusBar label="Status">…</StatusBar>}>
  <MainContent>…</MainContent>
  <Dock label="Agent panel" closeLabel="Close" onClose={close} resizeLabel="Resize the agent panel">…</Dock>
</AppLayout>

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

Pasek tytułu jest banerem, a dok nazwanym landmarkiem complementary z nagłówkiem poziomu 2.
Jego uchwyt jest separatorem z fokusem: klawisze strzałek zmieniają rozmiar o 16 px, Home i End idą do granic, Enter zwija i przywraca.
Poniżej 48 rem dok otwiera się jako arkusz modalny, który zamyka się klawiszem Escape.

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