AccordionBox¶

Overview¶

Box that can be expanded/collapsed to show/hide contents.

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

Class AccordionBox¶

import { AccordionBox } from 'scenerystack/sun';

Constructor¶

new AccordionBox( contentNode : Node, providedOptions? : AccordionBoxOptions )¶

Instance Methods¶

getCollapsedBoxHeight() : number¶

Returns the ideal height of the collapsed box (ignoring things like stroke width)

getExpandedBoxHeight() : number¶

Returns the ideal height of the expanded box (ignoring things like stroke width)

reset()¶

Instance Properties¶

expandedProperty : Property<boolean>¶

(readonly)

Static Properties¶

AccordionBoxIO : IOType¶

(readonly)

Type AccordionBoxOptions¶

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

• titleNode?: Node
  If not provided, a Text node will be supplied. Should have and maintain well-defined bounds if passed in
• expandedProperty?: Property<boolean>
  If not provided, a BooleanProperty will be created, defaulting to the value of expandedDefaultValue.
• expandedDefaultValue?: boolean
• overrideTitleNodePickable?: boolean
  If true (the default), we'll adjust the title so that it isn't pickable at all
• resize?: boolean
  If true, the AccordionBox will resize itself as needed when the title/content resizes. See https://github.com/phetsims/sun/issues/304
• cursor?: NodeOptions[ 'cursor' ]
  applied to multiple parts of this UI component (NOTE: cursor is NOT applied to the main node!!)
• lineWidth?: PathOptions[ 'lineWidth' ]
• cornerRadius?: RectangleOptions[ 'cornerRadius' ]
• stroke?: PaintableOptions[ 'stroke' ]
  For the box
• fill?: PaintableOptions[ 'fill' ]
• minWidth?: number
• titleAlignX?: "center" | "left" | "right"
  horizontal alignment of the title, 'left'|'center'|'right'
• titleAlignY?: "top" | "center"
  vertical alignment of the title, relative to expand/collapse button 'top'|'center'
• titleXMargin?: number
  horizontal space between title and left|right edge of box
• titleYMargin?: number
  vertical space between title and top of box
• titleXSpacing?: number
  horizontal space between title and expand/collapse button
• showTitleWhenExpanded?: boolean
  true = title is visible when expanded, false = title is hidden when expanded When true, the content is shown beneath the title. When false, the content is shown to the side of the title
• useExpandedBoundsWhenCollapsed?: boolean
  If true, the expanded box will use the bounds of the content node when collapsed
• useContentWidthWhenCollapsed?: boolean
  If true, the collapsed box will remain as wide as the collapsed content. If false, the collapsed box will only surround the expand/collapse button and title.
• titleBarExpandCollapse?: boolean
  clicking on the title bar expands/collapses the accordion box
• allowContentToOverlapTitle?: boolean
  if true, the content will overlap the title when expanded, and will use contentYMargin at the top
• expandCollapseButtonOptions?: ExpandCollapseButtonOptions
  options passed to ExpandCollapseButton constructor
• buttonAlign?: "left" | "right"
  expand/collapse button layout
• buttonXMargin?: number
• buttonYMargin?: number
• contentAlign?: "left" | "center" | "right"
  content
• contentVerticalAlign?: "top" | "center" | "bottom"
• contentXMargin?: number
• contentYMargin?: number
• contentXSpacing?: number
• contentYSpacing?: number
• titleBarOptions?: RectangleOptions
• expandedSoundPlayer?: TSoundPlayer
  sound players for expand and collapse
• collapsedSoundPlayer?: TSoundPlayer
• contextResponseExpanded?: TAlertable
  pdom/voicing - responses to be spoke (both PDOM and Voicing) when the AccordionBox is expanded or collapsed
• contextResponseCollapsed?: TAlertable
• helpTextExpanded?: PDOMValueType | null
  pdom - AccordionBoxes usually don't have accessibleHelpText. If they do, the content is usually only available when collapsed. There is one option for each state.
• helpTextCollapsed?: PDOMValueType | null
• voicingHintResponseExpanded?: ResolvedResponse
  voicing - AccordionBoxes usually don't have accessibleHelpText, so default values for voicing are not set from accessibleHelpText. Usually, the hint response is removed when the accordion box is expanded. There is one option for each state.
• voicingHintResponseCollapsed?: ResolvedResponse
• headingTagName?: string
  pdom
• & NodeOptions

Source Code¶

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