• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

SplitterComponent

Represents the Kendo UI Splitter component for Angular.


 @Component({
   selector: 'my-app',
   template: `
       <kendo-splitter [style.height.px]="280">

         <kendo-splitter-pane [collapsible]="true" size="30%">
           <h3>Inner splitter / left pane</h3>
           <p>Resizable and collapsible.</p>
         </kendo-splitter-pane>

         <kendo-splitter-pane>
           <h3>Inner splitter / center pane</h3>
           <p>Resizable only.</p>
         </kendo-splitter-pane>

         <kendo-splitter-pane [collapsible]="true" size="30%">
           <h3>Inner splitter / right pane</h3>
           <p>Resizable and collapsible.</p>
         </kendo-splitter-pane>

       </kendo-splitter>
     `,
   styles: [ `
       h3 { font-size: 1.2em; }
       h3, p { margin: 10px; padding: 0; }
   ` ]
 })
 class AppComponent {}

Selector

kendo-splitter

Export Name

Accessible in templates as #kendoSplitterInstance="kendoSplitter"

Inputs

NameTypeDefaultDescription

orientation

Orientation

Specifies the orientation of the panes within the Splitter. Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.

resizeStep

number

10

The distance in pixels that the separator is moved with during keyboard navigation.

splitbarWidth

number

Sets the width or height (depending on the orientation) of the Splitter splitbars in pixels.

Events

NameTypeDescription

layoutChange

EventEmitter<string>

Fires after a Splitter pane is resized or collapsed. Useful for triggering layout calculations on components which are positioned inside the panes.

In this article

Not finding the help you need?