Panel¶

Overview¶

Control panel around a content node. Dynamically adjusts its size to fit its contents.

@author Sam Reid (PhET Interactive Simulations) @author Chris Malley (PixelZoom, Inc.) @author John Blanco (PhET Interactive Simulations)

Class Panel¶

import { Panel } from 'scenerystack/sun';

Constructor¶

new Panel( content : Node, providedOptions? : PanelOptions )¶

Instance Methods¶

getStroke() : TPaint¶

Get the background rectangle's stroke (can be overridden)

setStroke( stroke : TPaint )¶

Change the background rectangle's stroke (can be overridden)

getFill() : TPaint¶

Get the background rectangle's fill (can be overridden)

setFill( fill : TPaint )¶

Change the background rectangle's fill (can be overridden)

setExcludeInvisibleChildrenFromBounds( excludeInvisibleChildrenFromBounds : boolean )¶

Static Properties¶

DEFAULT_PANEL_OPTIONS¶

(readonly)

Type PanelAlign¶

import type { PanelAlign } from 'scenerystack/sun';

"left" | "center" | "right"

Type PanelOptions¶

import type { PanelOptions } from 'scenerystack/sun';

• fill?: TPaint
• stroke?: TPaint
• lineWidth?: number
  width of the background border
• lineDash?: number[]
• xMargin?: number
• yMargin?: number
• cornerRadius?: number
  radius of the rounded corners on the background
• resize?: boolean
  dynamically resize when content bounds change
• backgroundPickable?: boolean
• align?: PanelAlign
  horizontal alignment of content in the pane, see ALIGN_VALUES All alignments are equal when the content width >= minWidth Left is the default alignment so when there are multiple panels, their content will left align, see #252
• minWidth?: number
  minimum width of the panel (lineWidth will add to this)
• minHeight?: number
• & SizableOptions & NodeOptions

Source Code¶

See the source for Panel.ts in the sun repository.