@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
88 lines (87 loc) • 3.96 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 %}).
*
* @example
* ```html
* <kendo-splitter [style.height.px]="280">
* <kendo-splitter-pane [collapsible]="true" size="30%">
* <h3>Left pane</h3>
* </kendo-splitter-pane>
* <kendo-splitter-pane>
* <h3>Right pane</h3>
* </kendo-splitter-pane>
* </kendo-splitter>
* ```
* @remarks
* Supported children components are: {@link SplitterPaneComponent}.
*/
export declare class SplitterComponent implements AfterContentInit {
protected element: ElementRef<HTMLElement>;
protected splitterService: SplitterService;
private localization;
private renderer;
private ngZone;
private enclosingPane?;
/**
* Defines the orientation of the panes within the Splitter.
* Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
*
* @default 'horizontal'
*/
orientation: Orientation;
/**
* Defines the width or height of the Splitter splitbars in pixels.
* The dimension depends on the orientation of the Splitter.
*/
splitbarWidth: number;
/**
* Defines the distance in pixels that you move the separator during keyboard navigation.
*
* @default 10
*/
set resizeStep(value: number);
get resizeStep(): number;
/**
* Defines the CSS classes that are rendered on the splitter bars.
* Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
splitterBarClass: string | Array<string> | Object;
/**
* Fires when the layout of the Splitter changes.
* Use this event to trigger layout calculations on components that 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>;
}