Panel

import { Panel } from 'pixi-silk/ui/panel';

Experimental

A panel drawn on the canvas, with no DOM: a title bar, a body that scrolls, edges to resize and a chevron that folds it. Drag the title bar to move it, and drop it near a screen edge to dock it there. Size, position and folding glide on springs. Text is SilkText.

The body is Panel.content, a flex column. Add rows, fields or a widget to it. With scroll: false it fills the body instead, for widgets that scroll on their own like the layer tree.

Example#

const panel = new Panel({ title: 'Layers', dock: 'left', width: 240, viewport: camera.state });

panel.content.add(tree, { grow: 1, onSize: (w, h) => tree.resize(w, h) });
app.stage.addChild(panel);

Panels do not stack or tab into each other: two panels docked to the same edge overlap unless you set insets.

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new Panel(options?: PanelOptions): Panel;

Experimental

Parameters#

Parameter	Type
`options`	`PanelOptions`

Returns#

Panel

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`actions`	`readonly`	`FlexContainer`	`Experimental` A flex row at the right of the title bar for buttons of your own.	ui/panels/Panel.ts:273
`content`	`readonly`	`FlexContainer`	`Experimental` The body: a flex column. With `scroll`, it scrolls inside Panel.scroll.	ui/panels/Panel.ts:267
`header`	`readonly`	`FlexContainer`	`Experimental` The title bar, a flex row.	ui/panels/Panel.ts:271
`insets`	`public`	`PanelInsets`	`Experimental` Space kept free along the screen edges. Applies from the next layout.	ui/panels/Panel.ts:287
`margin`	`public`	`number`	`Experimental` Gap to the screen edge when docked. Applies from the next layout.	ui/panels/Panel.ts:285
`maxHeight`	`public`	`number`	`Experimental` Largest height a resize allows. `Infinity` for no limit.	ui/panels/Panel.ts:283
`maxWidth`	`public`	`number`	`Experimental` Largest width a resize allows. `Infinity` for no limit.	ui/panels/Panel.ts:281
`minHeight`	`public`	`number`	`Experimental` Smallest height a resize leaves. Applies from the next resize.	ui/panels/Panel.ts:279
`minWidth`	`public`	`number`	`Experimental` Smallest width a resize leaves. Applies from the next resize.	ui/panels/Panel.ts:277
`scroll`	`readonly`	`ScrollView` \| `null`	`Experimental` The scroller around `content`, or null with `scroll: false`.	ui/panels/Panel.ts:269
`state`	`readonly`	`PanelState`	`Experimental` Folding, docking and drag state, as signals.	ui/panels/Panel.ts:263
`theme`	`readonly`	`PanelTheme`	`Experimental` Colours, radius and font, resolved from the `theme` option.	ui/panels/Panel.ts:265
`titleText`	`readonly`	`SilkText`	`Experimental` The title text.	ui/panels/Panel.ts:275

Accessors#

collapsed#

Get Signature#

get collapsed(): boolean;

Experimental

True while folded to the title bar.

Returns

boolean

docked#

Get Signature#

get docked(): boolean;

Experimental

True when docked to an edge or a corner.

Returns

boolean

headerHeight#

Get Signature#

get headerHeight(): number;

Experimental

Title bar height.

Returns

number

shownRect#

Get Signature#

get shownRect(): PanelRect;

Experimental

The rectangle drawn now, in the parent’s space: position, width and the folded or unfolded height.

Returns

PanelRect

title#

Get Signature#

get title(): string;

Experimental

The title text.

Returns

string

Set Signature#

set title(text: string): void;

Experimental

Sets Panel.title.

Parameters

Parameter	Type
`text`	`string`

Returns

void

Methods#

collapse()#

collapse(): this;

Experimental

Folds the body away.

Returns#

this

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the motion and signal subscriptions. Destroys children unless options says otherwise.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

dockTo()#

dockTo(dock: PanelDock | null): this;

Experimental

Docks to an edge or a corner, or floats with null.

Parameters#

Parameter	Type
`dock`	`PanelDock` \| `null`

Returns#

this

dragBy()#

dragBy(
   dx: number, 
   dy: number, 
   pointer?: PointData
): void;

Experimental

Moves or resizes as a press dragged by (dx, dy) in the parent’s space does. pointer is where the pointer is now, for docking. Pointer moves call this.

Parameters#

Parameter	Type
`dx`	`number`
`dy`	`number`
`pointer?`	`PointData`

Returns#

void

expand()#

expand(): this;

Experimental

Unfolds the body.

Returns#

this

hitTest()#

hitTest(global: PointData): boolean;

Experimental

True when a point in the stage’s space is over the panel as drawn.

Parameters#

Parameter	Type
`global`	`PointData`

Returns#

boolean

moveTo()#

moveTo(
   x: number, 
   y: number, 
   animate?: boolean
): this;

Experimental

Floats at (x, y) in the parent’s space. Undocks a docked panel. animate: false jumps there.

Parameters#

Parameter	Type	Default value
`x`	`number`	`undefined`
`y`	`number`	`undefined`
`animate`	`boolean`	`true`

Returns#

this

release()#

release(): void;

Experimental

Ends a press: a tap on the chevron folds, a drag that ends near an edge docks there.

Returns#

void

resizeTo()#

resizeTo(
   width: number, 
   height: number, 
   animate?: boolean
): this;

Experimental

Sets the floating size, within the limits. A panel docked to an edge keeps spanning it. animate: false jumps.

Parameters#

Parameter	Type	Default value
`width`	`number`	`undefined`
`height`	`number`	`undefined`
`animate`	`boolean`	`true`

Returns#

this

setViewport()#

setViewport(width: number, height: number): this;

Experimental

Sets the screen size the panel docks in, for apps that track the size themselves instead of passing signals.

Parameters#

Parameter	Type
`width`	`number`
`height`	`number`

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances the motion by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean

toggle()#

toggle(): this;

Experimental

Folds or unfolds.

Returns#

this