DockGrip

Uchwyt zmiany rozmiaru na krawędzi panelu, takiego jak terminal pod edytorem. Dock dodaje własny; użyj DockGrip bezpośrednio dla własnego panelu.

DockGrip

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: DockGrip

Editor

Terminal

$ npm test

Noc, podgląd: DockGrip

Editor

Terminal

$ npm test

Wysoki kontrast, podgląd: DockGrip

Editor

Terminal

$ npm test

UżycieLink do sekcji Użycie

tsx

import { DockGrip } from '@skribly/ui/shell'

tsx

<section id="terminal" style={{ height }} className="relative">
  <DockGrip label="Resize the terminal" value={height} onChange={setHeight} minValue={80} maxValue={400} edge="top" controls="terminal" />
</section>

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

Separator z fokusem nazwany swoją etykietą, z rozmiarem zgłaszanym jako procent zakresu.
Klawisze strzałek przesuwają o 16 px, Page Up i Page Down o 160 px, Home i End do granic, Enter zwija i przywraca.
Pole trafienia ma 12 px szerokości wzdłuż całej krawędzi.

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