Components
Split Layout
SketchSplitLayout — a two-pane split layout that stacks responsively on narrow screens.
SketchSplitLayout places two content panes side-by-side using a flex grid that
respects a configurable ratio. On narrow screens the panes wrap and stack
automatically — no media queries needed.
Default
import { SketchSplitLayout, SketchCard, SketchInput } from "blackchalk";<SketchSplitLayoutleft={ <SketchCard style={{ padding: 24 }}> <h3 style={{ marginTop: 0 }}>Edit</h3> <SketchInput placeholder="Title" /> </SketchCard>}right={ <SketchCard style={{ padding: 24 }}> <h3 style={{ marginTop: 0 }}>Preview</h3> <p>Live preview of the form on the left.</p> </SketchCard>}/>Weighted ratio
Pass a ratio tuple to give one pane more space than the other.
import { SketchSplitLayout, SketchCard } from "blackchalk";<SketchSplitLayoutratio={[2, 1]}left={<SketchCard style={{ padding: 24 }}>Wide content (2fr)</SketchCard>}right={<SketchCard style={{ padding: 24 }}>Sidebar (1fr)</SketchCard>}/>Props
| Prop | Type | Default |
|---|---|---|
left | ReactNode | — |
right | ReactNode | — |
ratio | [number, number] | [1, 1] |
gap | number | 32 |
See it in the Storybook playground, or read the source.