ButtonNode¶

Overview¶

ButtonNode is the base class for the sun button hierarchy.

@author John Blanco (PhET Interactive Simulations) @author Sam Reid (PhET Interactive Simulations) @author Michael Kauzmann (PhET Interactive Simulations)

Class ButtonNode¶

import { ButtonNode } from 'scenerystack/sun';

Constructor¶

new ButtonNode( buttonModel : ButtonModel, buttonBackground : Path, interactionStateProperty : TReadOnlyProperty<ButtonInteractionState>, providedOptions? : ButtonNodeOptions )¶

Instance Methods¶

dispose()¶

setBaseColor( baseColor : TColor )¶

Sets the base color, which is the main background fill color used for the button.

getBaseColor() : TColor¶

Gets the base color for this button.

pdomClick()¶

Manually click the button, as it would be clicked in response to alternative input. Recommended only for accessibility usages. For the most part, PDOM button functionality should be managed by PressListener, this should rarely be used.

Instance Properties¶

buttonModel : ButtonModel¶

(protected)

content : Node | null¶

(protected, readonly)

contentContainer : Node | null¶

(readonly)

layoutSizeProperty : TinyProperty<Dimension2>¶

(protected, readonly)

maxLineWidth : number¶

(protected, readonly)

The maximum lineWidth our buttonBackground can have. We'll lay things out so that if we adjust our lineWidth below this, the layout won't change

Static Properties¶

FlatAppearanceStrategy : TButtonAppearanceStrategy¶

Type ButtonNodeOptions¶

Normal options, for use in optionize

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

• content?: Node | null
  what appears on the button (icon, label, etc.)
• xMargin?: number
  margin in x direction, i.e. on left and right
• yMargin?: number
  margin in y direction, i.e. on top and bottom
• xAlign?: AlignBoxXAlign
  Alignment, relevant only when options minWidth or minHeight are greater than the size of options.content
• yAlign?: AlignBoxYAlign
• xContentOffset?: number
  By default, icons are centered in the button, but icons with odd shapes that are not wrapped in a normalizing parent node may need to specify offsets to line things up properly
• yContentOffset?: number
• listenerOptions?: PressListenerOptions
  Options that will be passed through to the main input listener (PressListener)
• baseColor?: TPaint
  initial color of the button's background
• disabledColor?: TPaint
  Color when disabled
• buttonAppearanceStrategy?: TButtonAppearanceStrategy
  Class and associated options that determine the button's appearance and the changes that occur when the button is pressed, hovered over, disabled, and so forth.
• buttonAppearanceStrategyOptions?: TButtonAppearanceStrategyOptions
• contentAppearanceStrategy?: TContentAppearanceStrategy | null
  Class and associated options that determine how the content node looks and the changes that occur when the button is pressed, hovered over, disabled, and so forth.
• contentAppearanceStrategyOptions?: TContentAppearanceStrategyOptions
• enabledAppearanceStrategy?: EnabledAppearanceStrategy
  Alter the appearance when changing the enabled of the button.
• & SizableOptions & VoicingOptions & NodeOptions

Class FlatAppearanceStrategy¶

FlatAppearanceStrategy is a value for ButtonNode options.buttonAppearanceStrategy. It makes a button look flat, i.e. no shading or highlighting, with color changes on mouseover, press, etc.

import { FlatAppearanceStrategy } from 'scenerystack/sun';

Constructor¶

new FlatAppearanceStrategy( buttonBackground : PaintableNode, interactionStateProperty : TReadOnlyProperty<ButtonInteractionState>, baseColorProperty : TReadOnlyProperty<Color>, providedOptions? : TButtonAppearanceStrategyOptions )¶

Instance Methods¶

dispose()¶

Instance Properties¶

maxLineWidth : number¶

(readonly)

Source Code¶

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