Skip to content

PreferencesControl

Overview

A ToggleSwitch decorated with a visual label and description with layout for each. To be used in the PreferencesDialog.

@author Jesse Greenberg (PhET Interactive Simulations) @author Marla Schulz (PhET Interactive Simulations)

Class PreferencesControl

Layout using GridBox and layoutOptions will accomplish the following when all components are available. [[labelNode]] [[ToggleSwitch]] [[descriptionNode ]]

import { PreferencesControl } from 'scenerystack/joist';

Constructor

new PreferencesControl( providedOptions? : PreferencesControlOptions )

Instance Methods

Type PreferencesControlOptions

import type { PreferencesControlOptions } from 'scenerystack/joist';
  • labelNode?: Node
    if provided, a label Node to the left of the toggle switch control
  • labelSpacing?: number
    horizontal spacing between label for the component and toggle switch IF there is no descriptionNode. If a descriptionNode is provided, layout of the labelNode will be relative to the description.
  • valueLabelXSpacing?: number
    horizontal spacing between the toggle switch and left/right value labels
  • descriptionNode?: Node
    if provided, a Node under the ToggleSwitch and label that is meant to describe the purpose of the switch
  • allowDescriptionStretch?: boolean
    If true, the description cell will stretch to a minimum content width, and the control will be pushed out to align with that width. This makes the control align with other controls in the dialog. Disable if you want the control to always be right aligned with the description.
  • ySpacing?: number
    vertical spacing between ToggleSwitch and description Node
  • controlNode?: Node
  • nestedContent?: Array<Node>
  • headingControl?: boolean
  • & GridBoxOptions

Source Code

See the source for PreferencesControl.ts in the joist repository.