Skip to content

RectangularButton

Overview

RectangularButton is the base class for rectangular buttons.

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

Class RectangularButton

import { RectangularButton } from 'scenerystack/sun';

Constructor

new RectangularButton( buttonModel : ButtonModel, interactionStateProperty : TReadOnlyProperty<ButtonInteractionState>, providedOptions? : RectangularButtonOptions )

Instance Methods

Static Properties

ThreeDAppearanceStrategy : TButtonAppearanceStrategy

Type RectangularButtonOptions

import type { RectangularButtonOptions } from 'scenerystack/sun';
  • size?: Dimension2 | null
    If specified, this will be the size of the button. minWidth and minHeight will be ignored, and content will be scaled down to fit inside, accounting for margins. NOTE: This will NOT be the size of the button. It does NOT account for the stroke/lineWidth, so the button will ALWAYS be larger than this. ADDITIONALLY: The button can be larger, if the content doesn't fit.
  • minWidth?: number
    If you want complete control of a button's dimensions, use options.size. If you want to specify one dimensions while having the other dimension determined by content and margin, then use one of these options. NOTE: This minWidth/minHeight does NOT include the stroke
  • minHeight?: number
  • touchAreaXDilation?: number
    pointer area dilation
  • touchAreaYDilation?: number
  • mouseAreaXDilation?: number
  • mouseAreaYDilation?: number
  • touchAreaXShift?: number
    pointer area shift, see https://github.com/phetsims/sun/issues/500
  • touchAreaYShift?: number
  • mouseAreaXShift?: number
  • mouseAreaYShift?: number
  • stroke?: TPaint | null
  • lineWidth?: number
  • cornerRadius?: number
    radius applied to all corners unless a corner-specific value is provided
  • leftTopCornerRadius?: number | null
    {number|null} corner-specific radii If null, the option is ignored. If non-null, it overrides cornerRadius for the associated corner of the button.
  • rightTopCornerRadius?: number | null
  • leftBottomCornerRadius?: number | null
  • rightBottomCornerRadius?: number | null
  • & ButtonNodeOptions

Source Code

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