KeyboardHelpSectionRow¶

Overview¶

A row of KeyboardHelpSection, containing the label, icon, and text. Many of the static functions of KeyboardHelpSection will return a KeyboardHelpSectionRow. The label and icon are often grouped in an AlignGroup for easy positioning in KeyboardHelpSection. This cannot be done in KeyboardHelpSection directly because different labels and icons will have varying layout. For instance, see labelWithIcon vs labelWithIconList.

@author Jesse Greenberg (PhET Interactive Simulations)

Class KeyboardHelpSectionRow¶

import { KeyboardHelpSectionRow } from 'scenerystack/scenery-phet';

Constructor¶

new KeyboardHelpSectionRow( text : Text | RichText, label : Node, icon : Node, providedOptions? : KeyboardHelpSectionRowOptions )¶

Instance Methods¶

setContentsVisible( visible : boolean )¶

Sets visibility of the label, icon, and text so that it can be hidden if necessary. If using KeyboardHelpSection, this will also correctly layout the content because of scenery dynamic layout.

Instance Properties¶

text : Text | RichText¶

(readonly)

Includes a reference to the Text because KeyboardHelpSection will constrain the width of all text in its KeyboardHelpSectionRows for i18n.

label : Node¶

(readonly)

A layout Node containing the readable Text describing this row.

icon : Node¶

(readonly)

An icon Node graphically showing the keyboard keys for this row.

readingBlockContent : VoicingResponse | null¶

(readonly)

voicing - When Voicing is enabled, this is the content for this row that will be spoken with speech synthesis when the row is activated with a click.

Static Methods¶

labelWithIcon( labelString : string | TReadOnlyProperty<string>, icon : Node, providedOptions? : LabelWithIconOptions ) : KeyboardHelpSectionRow¶

Horizontally align a label and an icon, with the label on the left and the icon on the right. AlignGroup is used to give the label and icon identical dimensions for easy layout in KeyboardHelpSection.

labelWithIconList( labelString : string | TReadOnlyProperty<string>, icons : Node[], providedOptions? : LabelWithIconListOptions ) : KeyboardHelpSectionRow¶

Create a label with a list of icons. The icons will be vertically aligned, each separated by 'or' text. The label will be vertically centered with the first item in the list of icons. To vertically align the label with the first icon, AlignGroup is used. Finally, an AlignGroup is used to make the label content match height with the entire icon list. When assembled, the label with icon list will look like:

This is the label: Icon1 or Icon2 or Icon3

fromHotkeyData( hotkeyData : HotkeyData, providedOptions? : FromHotkeyDataOptions ) : KeyboardHelpSectionRow¶

Create a row for the keyboard help dialog from a HotkeyData object. Optionally override the icons and labels if you want to customize the row so it is different from the actual key data.

Static Properties¶

LABEL_FONT¶

(readonly)

Reusable font style and size for the KeyboardHelpDialog labels.

Source Code¶

See the source for KeyboardHelpSectionRow.ts in the scenery-phet repository.