limestone/KeyGuide

Limestone styled key guide component and behaviors.

Loading Live Preview

Members

KeyGuide Component

A Key Guide component, ready to use in Limestone applications.

`KeyGuide' may be used to display list of text with icons to describe key behavior.

Usage:

<KeyGuide
	open
>
	{[
	{icon: 'star', children: 'start label', key: 1},
	{icon: 'plus', children: 'plus label', key: 2},
	{icon: 'minus', children: 'minus label', key: 3}
]}
</KeyGuide>

Extends: limestone/KeyGuidelimestone/KeyGuide.KeyGuideBase
Wrapped with: limestone/KeyGuidelimestone/KeyGuide.KeyGuideDecorator

KeyGuideBase Component

A Key Guide component.

This component is most often not used directly but may be composed within another component as it is within limestone/KeyGuidelimestone/KeyGuide.KeyGuide.

Properties

arrowPosition

String

The direction of the arrow. If 'none', no arrow is shown. 'bottom', 'left', 'right', and 'top' can be used to position the arrow. Arrow is only displayed in image-based guides.

Default: 'none'

children

Array(any)Object(any)

The items to be displayed in the KeyGuide when open.

For icon-based guides, it takes an array of objects. The properties will be passed onto an Item component. The object requires children and a unique key property. If the icon property is one of 'red', 'green', 'yellow' or 'blue', a corresponding color bar is shown.

For image-based guides, it takes an object. The object requires children and imageSrc properties. The children property is the text to be displayed and the imageSrc property is the path to the image to display.

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

keyGuide - The root component class
imageGuide - Applied to an image-based keyGuide

open

Boolean

Controls the visibility of the KeyGuide.

KeyGuideDecorator Higher-Order Component

Applies Limestone specific behaviors to limestone/KeyGuidelimestone/KeyGuide.KeyGuideBase.

Includes: limestone/Marqueelimestone/Marquee.MarqueeController
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable