@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
104 lines (103 loc) • 4.46 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, EventEmitter, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Orientation } from '../common/orientation';
import { SplitterPaneComponent } from './splitter-pane.component';
import { SplitterBarComponent } from './splitter-bar.component';
import { SplitterService } from './splitter.service';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
*
* ```ts-preview
*
* @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 {}
* ```
*/
export declare class SplitterComponent implements AfterContentInit {
protected element: ElementRef<HTMLElement>;
protected splitterService: SplitterService;
private localization;
private renderer;
private ngZone;
private enclosingPane?;
/**
* 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.
*/
orientation: Orientation;
/**
* Sets the width or height (depending on the orientation) of the Splitter splitbars in pixels.
*/
splitbarWidth: number;
/**
* The distance in pixels that the separator is moved with during keyboard navigation.
* @default 10
*/
set resizeStep(value: number);
get resizeStep(): number;
/**
* The CSS classes that will be rendered on the splitter bars.
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
splitterBarClass: string | Array<string> | Object;
/**
* Fires after a Splitter pane is resized or collapsed.
* Useful for triggering layout calculations on components
* which are positioned inside the panes.
*/
layoutChange: EventEmitter<string>;
get hostClasses(): boolean;
get horizontalHostClasses(): boolean;
get verticalHostClasses(): boolean;
get dir(): string;
set splitbars(splitbars: QueryList<SplitterBarComponent>);
/**
* @hidden
*/
panes: QueryList<SplitterPaneComponent>;
private paneChangesSubscription;
private _styleObserver;
constructor(element: ElementRef<HTMLElement>, splitterService: SplitterService, localization: LocalizationService, renderer: Renderer2, ngZone: NgZone, enclosingPane?: SplitterPaneComponent);
ngAfterContentInit(): void;
ngOnChanges(changes: any): void;
ngOnDestroy(): void;
private reconfigure;
private unsubscribeChanges;
private configure;
private get direction();
private setFixedHeight;
static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, [null, null, null, null, null, { optional: true; host: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "kendo-splitter", ["kendoSplitter"], { "orientation": { "alias": "orientation"; "required": false; }; "splitbarWidth": { "alias": "splitbarWidth"; "required": false; }; "resizeStep": { "alias": "resizeStep"; "required": false; }; "splitterBarClass": { "alias": "splitterBarClass"; "required": false; }; }, { "layoutChange": "layoutChange"; }, ["panes"], ["kendo-splitter-pane"], true, never>;
}