'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
PaneLayout
A full-screen tool: a bar on top, panes on both sides and the work area between. On tablets the start pane goes; on phones one area at a time behind tabs.
import { PaneLayout } from '@alea/ui';
Examples
An editor
Bar, layers, canvas and style. Make the window narrower: the layers go first, then on phones one area at a time behind tabs.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-border…--alea-surface…--alea-surface-deep…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Props
PaneLayout props
A full-screen tool: a bar on top, panes on the sides and the work area between; on tablets the start pane goes, on phones one area at a time behind tabs.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The work area (canvas, editor, preview). |
bar | ReactNode | - | The bar across the top: back, the document's name, tools, publish. |
className | string | - | Extra class names for the root element. |
end | ReactNode | - | The pane on the end side (inspector, properties, comments). A tab on phones. |
height | Height<string | number> | - | Height of the whole layout. Default 100dvh (a full-screen tool). |
labels | { start?: string; main?: string; end?: string | undefined; } | undefined | - | Names of the three areas, for landmarks and the phone tabs. Default Layers, Canvas, Inspector (translated). |
mainAs | "div" | "main" | - | The work area's element: main (default) when the layout is the page, div when it sits inside another page. |
start | ReactNode | - | The pane on the start side (layers, files, outline). Hidden below 1280 px, a tab on phones. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
mainAsdivmain- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-panes.alea-panes-bar.alea-panes-tabs.alea-panes-start.alea-panes-main.alea-panes-end- Data attributes
data-startdata-enddata-area=startdata-area=maindata-area=end
Accessibility
- The panes are complementary landmarks and the work area is main, each named by labels.
- On phones the area switch is a segmented control; the hidden areas leave the page, so focus never lands in them.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the bar, then the visible panes in reading order |
| Left or Right arrow | Switches area on phones |
Do and don't
Do
- Name the areas after what they hold: Layers, Canvas, Style.
- Keep the bar to the document name, a few tools and one main action.
Don't
- Don't put the main action only in a pane: phones show one area at a time.
In Figma
Pane layout at Desktop, Tablet and Phone.