Loading…

Resizable Samples

Difficult to get right (responsive) or maybe just for me at the moment.

Desktop OnlyVertical/HorizontalScrollable

Resizable — Horizontal (with nested vertical)

Uses "direction="horizontal"" with three panels and a nested group. Handles use "withHandle".

v3.32

Apnatva

HomeStart
ShopBrowse products
OrdersHistory
ContactSupport

Quick search

Campaign Story

Editor area… (resize handle below)

Preview

Details

Status: Draft

Owner: @apnatva

Updated: 2h ago

Assets

ap-icon-1.svg
ap-icon-2.svg
ap-icon-3.svg
ap-icon-4.svg

Drag handles to resize. Keyboard support: focus a handle and use arrow keys to resize panels.

All images use "ap-icon.svg" via "next/Image". Links use "next/Link".

Horizontal + Nested

Resizable — Vertical

Split the page vertically into header, scrollable body, and footer. Uses "direction="vertical"".

Header

Card 1

This is a scrollable body area. Resize from the handles above/below.

Card 2

This is a scrollable body area. Resize from the handles above/below.

Card 3

This is a scrollable body area. Resize from the handles above/below.

Card 4

This is a scrollable body area. Resize from the handles above/below.

Card 5

This is a scrollable body area. Resize from the handles above/below.

Card 6

This is a scrollable body area. Resize from the handles above/below.

Footer

Use "minSize" / "maxSize" on panels to constrain resizing.

Vertical

Resizable — Sidebar / Content / Inspector

Demonstrates "minSize", "maxSize", and "collapsible" side panels with centered content.

Sidebar

Section A
Section B
Section C

Main content area

Resize the side panels to see constraints.

Inspector

Type: Illustration

Format: SVG

Size: 42 KB

You can show or hide the grabber by toggling "withHandle" on "ResizableHandle".

Constraints & Collapsible

Dynamic Standalone Sample Mount | AP Component Library