ui/ Skinnable
Exports the ui/Skinnable.Skinnable Higher-order Component (HOC).
This is the base-level implementation of this component. It will typically never be accessed directly, and only be instantiated with a configuration once inside a visual-library like moonstone/Skinnable. Interface libraries will supply a set of supported skins which will be accessible to their components.
import Skinnable from '@enact/ui/Skinnable';
Members
SkinnableHigher-Order Component
Skinnable is a Higher-order Component that assigns skinning classes for the purposes of styling children components.
Use the config options to specify the skins your theme has. Set this up in your Theme's decorator component to establish your supported skins.
Example:
App = Skinnable({
skins: {
dark: 'moonstone',
light: 'moonstone-light'
},
defaultTheme: 'dark'
}, App);
import Skinnable from '@enact/ui/Skinnable';
Configuration
- skins
A hash mapping the available skin names to their CSS class name. The keys are accepted as the only valid values for the
skin
prop on the wrapped component.- defaultSkin
Assign a default skin from the
skins
list. This will be used if the instantiator of the wrapped component provides no value to theskin
prop.
Properties added to wrapped component
- skin
Select a skin by name. The list of available skins is established by the direct consumer of this component via the config options. This will typically be done once by the theme decorator, like MoonstoneDecorator which will supply the list of skins.
withSkinnablePropsHigher-Order Component
Occasionally, there's a case where context isn't available or your component only updates on
specific props changes. This HOC supplies the relevant context state values as props. In this
case, skin
is avaliable as a prop to the wrapped component.
import {withSkinnableProps} from '@enact/ui/Skinnable';