enact logoEnact
Edit on GitHub

sandstone/KeyGuide

Sandstone styled key guide component and behaviors.

import KeyGuide from '@enact/sandstone/KeyGuide';

Members

KeyGuideComponent

A Key Guide component, ready to use in Sandstone 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>
import KeyGuide from '@enact/sandstone/KeyGuide';

KeyGuideBaseComponent

A Key Guide component.

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

import {KeyGuideBase} from '@enact/sandstone/KeyGuide';
Properties
children
ArrayObject

The items to be displayed in the KeyGuide when open.

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.

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

open
Boolean

Controls the visibility of the KeyGuide.

KeyGuideDecoratorHigher-Order Component

Applies Sandstone specific behaviors to KeyGuide.

import {KeyGuideDecorator} from '@enact/sandstone/KeyGuide';
ArrayBooleanFunctionModuleNumberObjectString