DockGrip

The resize handle on the edge of a panel, such as a terminal under the editor. Dock adds one itself; use DockGrip directly for a panel of your own.

DockGrip

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, DockGrip

Editor

Terminal

$ npm test

Dark theme, DockGrip

Editor

Terminal

$ npm test

High contrast theme, DockGrip

Editor

Terminal

$ npm test

UsageLink to the section Usage

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>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A focusable separator named by its label, with its size reported as a percent of the range.
Arrow keys move it by 16px, Page Up and Page Down by 160px, Home and End to the limits, Enter collapses and restores.
The hit area is 12px wide along the whole edge.

This demo runs through axe in all three themes on every test run. See what the tests check.