Splitter is utilized to separate and resize panels.
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
<Splitter style="height: 300px" class="mb-5">
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
</Splitter>
Initial dimension of a panel is percentage based and defined using the size property. In addition,minSize is provided to set a minimum value during a resize.
<Splitter style="height: 300px">
<SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
</Splitter>
Panels are displayed as stacked by setting the layout to vertical.
<Splitter style="height: 300px" layout="vertical">
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center"> 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>
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. |