wix-style-react
Version:
48 lines (47 loc) • 1.61 kB
JavaScript
export default {
description: `A clickable preview for colors, gradients, images and vector graphics.
Mainly used as a building part for \`<Swatches/>\` component, but can be used as a standalone item too.`,
do: [
'Use it to create a swatch of selectable colors, gradients or images.',
'Use it to list available style options for the fill.',
],
dont: [
'Don’t use it to make large swatches. When a big preview is required, use <Thumbnail/> instead.',
],
featureExamples: [
{
title: 'Fill',
description: `Render preview content with \`fill\` prop. It accepts:<br/>
 - colors <br/>
 - gradients <br/>
 - images <br/>
 - SVGs`,
example: '_fill',
},
{
title: 'Preview ratio',
description: `Control preview ratio with the \`aspectRatio\` prop.
By default, the component maintains a 1:1 ratio when the width of parent container is defined.`,
example: '_previewRatio',
},
{
title: 'States',
description: `Control the component state with:<br/>
 - \`selected\` - use to highlight active selection<br/>
 - \`disabled\` - use to highlight unavailable option`,
example: '_states',
},
{
title: 'Render as',
description: `Render the preview as another component or DOM tag.`,
example: '_renderAs',
},
],
commonUseCaseExamples: [
{
title: 'Fill type',
description: `Use the preview to list the options for gradient fill types in forms.`,
example: '_fillType',
},
],
};