@playcanvas/pcui
Version:
User interface component library for the web
179 lines (178 loc) • 5.09 kB
TypeScript
import { Button } from '../Button';
import { Container, ContainerArgs } from '../Container';
import { Label } from '../Label';
/**
* The arguments for the {@link Panel} constructor.
*/
interface PanelArgs extends ContainerArgs {
/**
* Sets whether the Element is collapsible.
*/
collapsible?: boolean;
/**
* Sets whether the Element should be collapsed.
*/
collapsed?: boolean;
/**
* Sets whether the panel can be reordered.
*/
sortable?: boolean;
/**
* Sets whether the panel collapses horizontally - this would be the case for side panels. Defaults to `false`.
*/
collapseHorizontally?: boolean;
/**
* Sets whether the panel can be removed.
*/
removable?: boolean;
/**
* The height of the header in pixels. Defaults to 32.
*/
headerSize?: number;
/**
* The header text of the panel. Defaults to the empty string.
*/
headerText?: string;
/**
* Sets the panel type.
*/
panelType?: 'normal';
/**
* A DOM element to use for the content container.
*/
content?: HTMLElement;
/**
* A DOM element to use for the header container.
*/
header?: HTMLElement;
}
/**
* The Panel is a {@link Container} that itself contains a header container and a content
* container. The respective Container functions work using the content container. One can also
* append elements to the header of the Panel.
*/
declare class Panel extends Container {
/**
* Fired when the panel gets collapsed.
*
* @event
* @example
* ```ts
* const panel = new Panel();
* panel.on('collapse', () => {
* console.log('Panel collapsed');
* });
* ```
*/
static readonly EVENT_COLLAPSE = "collapse";
/**
* Fired when the panel gets expanded.
*
* @event
* @example
* ```ts
* const panel = new Panel();
* panel.on('expand', () => {
* console.log('Panel expanded');
* });
* ```
*/
static readonly EVENT_EXPAND = "expand";
protected _suspendReflow: boolean;
protected _reflowTimeout: number;
protected _widthBeforeCollapse: string;
protected _heightBeforeCollapse: string;
protected _iconSort: Label;
protected _btnRemove: Button;
protected _containerContent: Container;
protected _containerHeader: Container;
protected _labelTitle: Label;
protected _collapsible: boolean;
protected _collapseHorizontally: boolean;
protected _draggedChild: this;
protected _collapsed: boolean;
protected _sortable: boolean;
protected _headerSize: number;
protected _onDragEndEvt: (event: MouseEvent) => void;
/**
* Creates a new Panel.
*
* @param args - The arguments. Extends the Container constructor arguments. All settable
* properties can also be set through the constructor.
*/
constructor(args?: Readonly<PanelArgs>);
destroy(): void;
protected _initializeHeader(args: PanelArgs): void;
protected _onHeaderClick: (evt: MouseEvent) => void;
protected _onClickRemove(evt: MouseEvent): void;
protected _initializeContent(args: PanelArgs): void;
protected _reflow(): void;
protected _onDragStart: (evt: MouseEvent) => void;
protected _onDragMove: (evt: MouseEvent) => void;
protected _onDragEnd(evt: MouseEvent): void;
/**
* Sets whether the Element is collapsible.
*/
set collapsible(value: boolean);
/**
* Gets whether the Element is collapsible.
*/
get collapsible(): boolean;
/**
* Sets whether the Element should be collapsed.
*/
set collapsed(value: boolean);
/**
* Gets whether the Element should be collapsed.
*/
get collapsed(): boolean;
/**
* Sets whether the panel can be reordered.
*/
set sortable(value: boolean);
/**
* Gets whether the panel can be reordered.
*/
get sortable(): boolean;
/**
* Sets whether the panel can be removed
*/
set removable(value: boolean);
/**
* Gets whether the panel can be removed
*/
get removable(): boolean;
/**
* Sets whether the panel collapses horizontally. This would be the case for side panels. Defaults to `false`.
*/
set collapseHorizontally(value: boolean);
/**
* Gets whether the panel collapses horizontally.
*/
get collapseHorizontally(): boolean;
/**
* Gets the content container.
*/
get content(): Container;
/**
* Gets the header container.
*/
get header(): Container;
/**
* Sets the header text of the panel. Defaults to the empty string.
*/
set headerText(value: string);
/**
* Gets the header text of the panel.
*/
get headerText(): string;
/**
* Sets the height of the header in pixels. Defaults to 32.
*/
set headerSize(value: number);
/**
* Gets the height of the header in pixels.
*/
get headerSize(): number;
}
export { Panel, PanelArgs };