Components / Resizable
Resizable
Two panels resized by pointer or keyboard with optional persistence.
Navigation
Canvas
html
<aevko-resizable>
<aside aevkoResizableFirst>
...
</aside>
<main aevkoResizableSecond>
...
</main>
</aevko-resizable>Installation
npx aevko-ui@latest add resizable --yesSource ownership
Customization
Adjust panel minimums and keyboard step through inputs; edit handle size and feedback in local CSS while preserving separator semantics.
Edit locallyThe installed template and stylesheet are application code, not a black box.
Theme semanticallyOverride
--aevko-* tokens or ordinary classes without !important.API reference
| Property or slot | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction in which the separator moves. |
size | model<number> | 50 | First panel size as a percentage. |
min | number | 15 | Minimum first-panel percentage. |
max | number | 85 | Maximum first-panel percentage. |
step | number | 5 | Percentage changed by an arrow-key press. |
storageKey | string | null | null | Optional localStorage key used to restore size. |
Accessibility contract
Accessibility
Included behavior
- The handle uses separator range semantics.
- Arrow keys resize; Home and End move to bounds.
Your responsibility
Give both panels meaningful content and ensure the configured min/max values keep that content usable.