Skip to content

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
  • expandedContextResponse?: TAlertable
    pdom/voicing - responses to be spoke (Both PDOM and Voicing) when the AccordionBox is expanded or collapsed
  • collapsedContextResponse?: TAlertable
  • voicingNameResponse?: VoicingResponse
    voicing - These are defined here in AccordionBox (duplicated from Voicing) so that they can be passed to the expandCollapse button, which handles voicing for AccordionBox, without AccordionBox mixing Voicing itself.
  • voicingObjectResponse?: VoicingResponse
  • voicingContextResponse?: VoicingResponse
  • voicingHintResponse?: VoicingResponse
  • headingTagName?: string
    pdom
  • & NodeOptions

Source Code

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