Repository navigation
feat: add a resizable panel group - #77
Merged
Merged
Conversation
ResizablePanelGroup, ResizablePanel and ResizableHandle follow shadcn: horizontal or vertical groups, DefaultSize, MinSize and MaxSize per panel in percent (panels without a default share what's left), and an OnLayout callback with every panel's size. Handles are separators with aria-valuenow; they drag with the pointer, and arrow keys, Home and End move a focused handle by KeyboardStep. The browser moves the panels during a drag or key press and reports the sizes once, through initResizeHandle in both shellui.js copies, so dragging never waits on a Blazor Server round trip. shellui add resizable now installs the panel group. The old Resizable, a plain flex container, stays in the package marked deprecated, and resizable leaves AllowedDrift. Fixes #67
Sync-checks the three parts and tests the initial sizes, the separator attributes and JS wiring, and applying a layout the browser reports.
The registry has 254 entries (98 direct, 156 hidden).
Three panels with a nested vertical split and a live layout readout. shellui.js is refreshed from the template and app.css rebuilt.
Contributor
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #67.
Neither copy of
Resizableresized anything. This adds shadcn'sResizablePanelGroup,ResizablePanelandResizableHandle:DefaultSize,MinSizeandMaxSizein percent. Panels without a default share what's left.role="separator"witharia-orientationandaria-valuenow. Drag with the pointer, or focus one and use the arrow keys (KeyboardStep, default 10%), Home and End.WithHandleshows a grip.OnLayoutgives every panel's size after a drag or key press, andLayoutreads the current sizes.Why it feels instant on Blazor Server: the new
initResizeHandleinshellui.js(both the package and template copies) moves the panels in the browser during a drag or key press and reports the sizes to .NET once. A drag never waits on a round trip.CLI:
shellui add resizablenow installs the panel group and its two hidden parts. The oldResizable(a plain flex container) stays in the package, marked deprecated, so nothing that uses it breaks.resizableis out ofAllowedDrift. Registry: 254 entries (98 direct, 156 hidden).Demo (
/components/new): three panels with a nested vertical split and a live layout readout. The demo'sshellui.jsis refreshed from the template; it was an unmodified older copy.Tests: 532 passing on net8.0 and net10.0, 0 warnings. Checked in the demo with real input:
MaxSize(35%) and reports 35 / 40 / 25.MinSize.