KeyNode¶

Overview¶

KeyNode looks like a keyboard key. It has a shadow rectangle under the key icon, with a slight offset so that it has a 3D appearance. KeyNodes are primarily used for accessibility to provide extra information about keyboard navigation and functionality, but an icon could be used for any purpose.

Each KeyNode has the same height by default, and icon will be scaled down if it is too large to maintain the proper key height. The width will expand based on padding and the width of the icon in order to surround content fully.

@author Jesse Greenberg

Class KeyNode¶

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

Constructor¶

new KeyNode( keyIcon : Node, providedOptions? : KeyNodeOptions )¶

Instance Methods¶

Type KeyNodeOptions¶

import type { KeyNodeOptions } from 'scenerystack/scenery-phet';

• keyFill?: TColor
  color and styling
• keyShadowFill?: TColor
• lineWidth?: number
• cornerRadius?: number
• xShadowOffset?: number
  offset for the shadow rectangle relative to the top left corner of the key
• yShadowOffset?: number
• xMargin?: number
  margins set by AlignBox
• yMargin?: number
• xAlign?: XAlign
  icon aligned in center of key by default
• yAlign?: YAlign
• xPadding?: number
  x and y padding around the icon, will increase the size of the key if there is available space, or scale down the icon if key is at max width or height
• yPadding?: number
• minKeyWidth?: number
  Key will be at least this wide, making it possible to surround the icon with extra space if necessary. The minimum width of the KeyNode allowed, if the icon is wider, than it will expand gracefully
• keyHeight?: number
  the desired height of the KeyNode; icon will be scaled down if too big
• forceSquareKey?: boolean
  Force the width of the KeyNode to be the same width as height, based on the height. Will scale down the icon if too wide.
• & StrictOmit<NodeOptions, "children">

Source Code¶

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