Kendo UI for Vue

Vue Splitter

  • Arrange your content in resizable, scrollable, collapsible panes.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
  • Overview

    The Vue Splitter allows you to divide a page into two or more panes in a row and/or column structure. Each pane can be resized with by dragging a handle up and down or side to side.

    See the Vue Splitter demo

    Splitter - Overview (1)
  • Panes

    The panes are the Splitter’s content area, and the component provides the following configuration options to set them up the way you need.

    • Dimensions: Sets the initial dimensions of a pane.
    • Resizing: Either allow or restrict end-user resizing.
    • Collapsing: Allow users to completely collapse panes.
    • Scrolling: Provide users with a scrollbar when content won’t fit inside a pane.

    See the Vue Splitter Panes demo

    Splitter - Panes
  • Orientation

    The Vue Splitter will automatically layout your panes vertically or horizontally depending on what you choose.

    See the Vue Orientation demo

    Splitter - Orientation
  • Keyboard Navigation

    The Vue Splitter supports navigation and interaction of the component using the keyboard. This is part of our ongoing commitment to UX and accessibility.

    See the Vue Splitter Keyboard Navigation demo

    Keyboard Navigation
  • Accessibility

    All components included in Kendo UI for Vue provide full WAI-ARIA support, compliance with Section 508 requirements, and is AAA rated with WCAG 2.0.

    Read the Vue Splitter Accessibility documentation

Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka