Usage #
Examples #
Basic #
Divides a layout into resizable panels with a draggable divider.
Vertical #
Panels are stacked when layout is set to vertical.
Size #
Initial dimensions are percentage based and provided through sizes on Splitter. Per-panel constraints are configured with minSize and maxSize.
Min Max Size #
Each panel can declare a minSize and a maxSize in percentages. The splitter ensures the panel cannot shrink below minSize nor grow beyond maxSize during a resize.
Collapsible #
Adding collapsible to a panel allows it to snap to collapsedSize (default 0%) once it is dragged past the halfway point between collapsedSize and minSize. Keyboard resize collapses immediately when the panel reaches minSize.
Nested #
Splitters can be nested by placing another Splitter inside a SplitterPanel.
Resize Events #
Splitter emits resizestart, resize, and resizeend while a gutter is being dragged, and collapse whenever a collapsible panel snaps to or out of collapsedSize. Every event carries the current sizes.
Stateful #
Binding the panel sizes with v-model:sizes turns the Splitter into a controlled component. Persisting the bound state to localStorage keeps the layout across page reloads. The built-in stateKey/stateStorage pair offers the same persistence without manual bookkeeping.
Disabled #
When disabled is present on the splitter, every gutter becomes non-interactive. The splitter is rendered with data-disabled, which the theme uses to fade the gutter and turn off pointer interactions.
Custom #
The default appearance is fully overridable through Tailwind utilities on the panels and the pt API on the gutter. Below, panels become colored badge containers and the gutter is rendered as a thin rounded bar.
Advanced #
A real-world layout combining a collapsible navigation pane, a custom gutter handle and a viewport that adapts to the current sizes. The pane switches to a compact list once its width drops below 28%.
- Amy Elsner10:24 AMQ1 Marketing ReportHi team, I've attached the Q1 marketing report. Please review the campaign metrics and share your feedback before our meeting on Friday.
- Bernardo Dominic9:15 AMDesign System UpdateThe new design tokens are ready for review. I've updated the color palette and typography scale based on our last discussion.
- Ioni BowcherYesterdaySprint Retrospective NotesHere are the notes from yesterday's retro. Key takeaways: improve code review turnaround and schedule more pair programming sessions.
- Stephen ShawYesterdayServer Migration PlanThe migration to the new cloud infrastructure is scheduled for next weekend. Please ensure all services have proper health checks configured.
- Elwin SharvillMondayNew Component Library ReleaseVersion 4.0 of the component library is now available. Major changes include accessibility improvements and new theming capabilities.
Q1 Marketing Report
10:24 AMHi team, I've attached the Q1 marketing report. Please review the campaign metrics and share your feedback before our meeting on Friday.
Accessibility #
Screen Reader
Splitter gutter defines separator as the role with aria-orientation set to either horizontal or vertical. Each gutter provides aria-valuenow, aria-valuemin, and aria-valuemax to communicate panel sizes. Adjacent panels are linked via aria-controls.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the splitter bar. |
| down arrow | Moves a vertical splitter down. |
| up arrow | Moves a vertical splitter up. |
| left arrow | Moves a horizontal splitter to the left. |
| right arrow | Moves a horizontal splitter to the right. |