wix-style-react
Version:
68 lines (67 loc) • 2.75 kB
JavaScript
export default {
description:
'Image viewer allows users to display images with built in functions like upload, update and remove.',
do: [
'Use it in forms to upload images, such as event cover.',
'Use it to display images that can be updated or removed.',
],
dont: [
'Don’t use it to display images that cannot be interacted with. Use static <Image/> instead.',
],
featureExamples: [
{
title: 'Dimensions',
description:
'Specify component dimensions in pixels or percentage using `width` and `height` properties.',
example: '_dimensions',
},
{
title: 'Status',
description: `Control component status using status prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight a failed image upload.<br/>
 - \`warning\` - use it to highlight that the media can’t be validated.<br/>
 - \`loading\` - use it to show that the media file is being loaded.<br/>`,
example: '_status',
},
{
title: 'Status message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user mouse hovers the status icon.
The placement of a tooltip is controlled with a \`tooltipProps\` prop.`,
example: '_statusMessage',
},
{
title: 'States',
description: `Supports 2 states:<br/>
 - No image source - uses \\<AddItem/> component to upload media in a required way.
Use \`addImageInfo\` to specify a message to display in a tooltip when users hover over the component.<br/>
 - With image source - use \`imageUrl\` prop to pass a link to a media file.<br/>`,
example: '_states',
},
{
title: 'Border radius',
description:
'Remove default corner radius with `removeRoundedBorders` prop. Use it when component is used as a part of another widget.',
example: '_borderRadius',
},
{
title: 'Disabled',
description: `Disables all viewer interactions with \`disabled\` prop. Use it to highlight unavailable function.<br/>
Customize tooltip style with all common \`tooltipProps\`.`,
example: '_disabled',
},
{
title: 'Actions',
description: `Control which actions are visible with \`showUpdateButton\`, \`showDownloadButton\`, and \`showRemoveButton\` props.
Tooltip messages explaining the actions can be customized according to the need.`,
example: '_actions',
},
],
commonUseCaseExamples: [
{
title: 'Form',
description:
'Use image viewer in forms when a single image can be uploaded at a time, e.g., a cover for an event, group or a program.',
example: '_form',
},
],
};