PixiUI

Class: Drawer

Drawer

Modal drawer component: a panel that slides in from an edge of the screen, with an optional backdrop, swipe-to-close and a scrollable content area.

The drawer is laid out relative to the screen centre, so add it to a container centred on the screen and tell it the screen size with Drawer.setScreenSize. The default size is 800x600.

new Drawer (options)

Modal drawer component that slides in from the edge of the screen.

Name	Type	Description
`options`	DrawerOptions	Configuration options for the drawer.
`options.position`	DrawerPosition	Screen edge the drawer is attached to (bottom, left, right, top). Defaults to `bottom`.
`options.backdrop`	string \| Texture \| Container \| Sprite \| Graphics	Backdrop view or settings. If omitted, a large tinted sprite covering the screen is used.
`options.backdropColor`	number	Color of the backdrop (if backdrop is not provided). Defaults to black.
`options.backdropAlpha`	number	Alpha of the backdrop when the drawer is open. Defaults to 0.5.
`options.background`	string \| Texture \| Container \| Sprite \| Graphics	Background view or settings for the drawer.
`options.content`	Container \| Container<Array>	Content view or array of views for the drawer.
`options.width`	number	Width of the drawer panel. For left/right drawers it is the visible width.
`options.height`	number	Height of the drawer panel. For top/bottom drawers it is the visible height.
`options.padding`	number	Padding around the drawer content. Defaults to 20.
`options.scrollBox`	ScrollBoxOptions	Configuration options for the scroll box containing the content.
`options.animations`	object	Animation settings for opening and closing the drawer. Without them the drawer opens and closes instantly.
`options.animations.open`	Animation	Animation settings for opening the drawer.
`options.animations.close`	Animation	Animation settings for closing the drawer.
`options.closeOnBackdropClick`	boolean	Whether to close the drawer when clicking on the backdrop. Defaults to true.
`options.swipeToClose`	boolean	Whether to enable swipe gesture to close the drawer. Defaults to true.
`options.nineSliceSprite`	unknown	Nine-slice scaling settings for the background (left, top, right, bottom). Used when `background` is a texture or texture name. Any other option is treated as a `Container` option and passed to the `Container` constructor (except `position`, which is the drawer edge here; use `x`/`y` to move the drawer).

Example

 const drawer = new Drawer({
     background: new Graphics().roundRect(0, 0, 400, 300, 20).fill(0xFFFFFF),
     content: myContent,
     position: 'bottom',
     width: 400,
     height: 300,
     animations: { open: { props: {}, duration: 300 }, close: { props: {}, duration: 300 } },
 });

 drawer.setScreenSize(app.screen.width, app.screen.height);
 drawer.onClose.connect(() => {
     console.log('Drawer closed');
 });

 view.addChild(drawer);
 drawer.open();

Extends

Container

Members

isOpen boolean

Whether the drawer is open. Becomes false only after the close animation has finished.

onClose Signal<() => void>

Signal emitted when the drawer is closed.

_tweens Tween<Container>[] protected

Open or close animations in flight; a new animation or a re-anchor stops them first.

drawerHeight number protected

Gets the drawer height from options or innerView.

drawerPadding number protected

Gets the drawer padding from options.

drawerPosition DrawerPosition protected

Gets the drawer position from options.

drawerWidth number protected

Gets the drawer width from options or innerView.

updateAnimations protectedreadonly

Kept as a field so destroy() can detach it from the shared ticker.

Methods

close () void

Slides the drawer out, hides it and emits onClose (instantly if no close animation is set).

destroy (options)

Destroys the component, detaching it from the shared ticker.

Name	Type	Attributes	Description
`options`	boolean \| DestroyOptions	<optional>	Options parameter.

hide () void

Hides the drawer (alias for close).

open () void

Shows the drawer and slides it in (instantly if no open animation is set).

setScreenSize (width, height) void

Sets the screen dimensions for positioning the drawer. The drawer automatically spans the full edge:

Bottom/Top drawers: full screen width
Left/Right drawers: full screen height

Name	Type	Description
`width`	number	Screen width.
`height`	number	Screen height.

show () void

Shows the drawer (alias for open).

getClosedPosition () { x : number, y : number } protected

Gets the closed position for the drawer based on its position setting.

Returns:

Type	Description
{ x : number, y : number }

getOpenPosition () { x : number, y : number } protected

Gets the open position for the drawer based on its position setting.

Returns:

Type	Description
{ x : number, y : number }

initBackdrop () void protected

Initializes the backdrop (semi-transparent background).

initContent () void protected

Initializes the content area.

initInnerView () void protected

Initializes the inner view (background panel).

initSwipeGesture () void protected

Initializes swipe gesture handling for closing.

stopAnimations () void protected

Stops the open or close animation in flight, if any, where it is.