import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/splitter/splitter.min.js"></script>
<script src="https://unpkg.com/primevue@^3/splitterpanel/splitterpanel.min.js"></script>
Splitter requires two SplitterPanel components to wrap.
<Splitter style="height: 300px">
<SplitterPanel>
Panel 1
</SplitterPanel>
<SplitterPanel>
Panel 2
</SplitterPanel>
</Splitter>
Any number of panels can be nested inside a Splitter.
<Splitter style="height: 300px">
<SplitterPanel v-for="item of items" :key="item.key">
{{item.content}}
</SplitterPanel>
</Splitter>
Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".
<Splitter style="height: 300px" layout="vertical">
<SplitterPanel>
Panel 1
</SplitterPanel>
<SplitterPanel>
Panel 2
</SplitterPanel>
</Splitter>
When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.
<Splitter style="height: 300px">
<SplitterPanel :size="20" >
Panel 1
</SplitterPanel>
<SplitterPanel :size="80">
Panel 2
</SplitterPanel>
</Splitter>
Minimum size defines the lowest boundary for the size of a panel.
<Splitter style="height: 300px">
<SplitterPanel :size="20" :minSize="10">
Panel 1
</SplitterPanel>
<SplitterPanel :size="80" :minSize="20">
Panel 2
</SplitterPanel>
</Splitter>
Splitters can be combined to create advanced layouts.
<Splitter style="height: 300px">
<SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10">
Panel 1
</SplitterPanel>
<SplitterPanel :size="80">
<Splitter layout="vertical">
<SplitterPanel class="flex align-items-center justify-content-center" :size="15">
Panel 2
</SplitterPanel>
<SplitterPanel :size="85">
<Splitter>
<SplitterPanel class="flex align-items-center justify-content-center" :size="20">
Panel 3
</SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center" :size="80">
Panel 4
</SplitterPanel>
</Splitter>
</SplitterPanel>
</Splitter>
</SplitterPanel>
</Splitter>
Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a stateKey to enable this feature. Default location of the state is session storage and other option is the local storage which can be configured using the stateStorage property.
<Splitter stateKey="mykey" stateStorage="local">
<SplitterPanel>
Panel 1
</SplitterPanel>
<SplitterPanel>
Panel 2
</SplitterPanel>
</Splitter>
Step factor is 5px by default and can be customized with step option.
<Splitter :step="10">
<SplitterPanel>
Panel 1
</SplitterPanel>
<SplitterPanel>
Panel 2
</SplitterPanel>
</Splitter>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | null | Size of the element relative to 100%. |
| minSize | number | null | Minimum size of the element relative to 100%. |
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| layout | string | horizontal | Orientation of the panels, valid values are "horizontal" and "vertical". |
| gutterSize | number | 4 | Size of the divider in pixels. |
| stateKey | string | null | Storage identifier of a stateful Splitter. |
| stateStorage | string | session | Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage. |
| step | number | 5 | Step factor to increment/decrement the size of the panels while pressing the arrow keys. |
| Name | Parameters | Description |
|---|---|---|
| resizestart |
event.originalEvent: Original event event.sizes: Sizes of the panels as an array |
Callback to invoke when resize starts. |
| resizeend |
event.originalEvent: Original event event.sizes: Sizes of the panels as an array |
Callback to invoke when resize ends. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-splitter | Container element. |
| p-splitter | Container element during resize. |
| p-splitter-horizontal | Container element with horizontal layout. |
| p-splitter-vertical | Container element with vertical layout. |
| p-splitter-panel | Splitter panel element. |
| p-splitter-gutter | Gutter element to use when resizing the panels. |
| p-splitter-gutter-handle | Handle element of the gutter. |
Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.
| 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. |
None.