wix-style-react
Version:
105 lines (104 loc) • 4.68 kB
JavaScript
export default {
description:
'Media overlay is a container that allows users to place any content on top of a media such as an image or a video.',
do: [
'Use it to place a badge, text or other content on top of a media.',
'Use it to reveal duration or other static data on media element hover.',
'Use it to reveal related actions on media element hover.',
],
dont: [
'Don’t use it to display plain images. Use <Image/> or <ImageViewer/> instead.',
],
featureExamples: [
{
title: 'Structure',
description: `Component consists of two main containers:<br/>
 - \`<MediaOverlay>\` - a parent container that accepts image or video content via \`media\` prop.<br/>
 - \`<MediaOverlay.Content>\` - child container that accepts items that should be displayed on top of a media as child elements.<br/>`,
example: '_structure',
},
{
title: 'Overlay content placement',
description: `Control the position of overlay elements with placement prop. It supports 5 positions:<br/>
 - \`top-start\`<br/>
 - \`top-end\`<br/>
 - \`middle\`<br/>
 - \`bottom-start\`<br/>
 - \`bottom-end\`<br/>`,
example: '_overlayContentPlacement',
},
{
title: 'Initial overlay skin',
description: `Control initial overlay type with \`skin\` prop. It supports 3 skins:<br/>
 - \`none\` (default) - use when no visual overlay is required.<br/>
 - \`gradient\` - use it when relevant data needs to be visible in a default state of the element.<br/>
 - \`dark\` - use it when media underneath is less important, e.g. as a last item in galleries with a total number or images on top.<br/>`,
example: '_initialOverlaySkin',
},
{
title: 'Hover overlay skin',
description: `Control hover overlay type with \`hoverSkin\` prop. It supports 3 skins:<br/>
 - \`none\` (default) - use for static media items.<br/>
 - \`gradient\` - use it when hovered item must remain visible, but overlaid content needs a contrast.<br/>
 - \`dark\` - use it to bring the maximum contrast of relevant content on interactive element hover.<br/>`,
example: '_hoverOverlaySkin',
},
{
title: 'Overlay content visibility',
description: `Specify when overlay content should be revealed for the user with visible prop. It supports 3 values:<br/>
 - \`default\` (default) - use it to hide overlay content on element hover.<br/>
 - \`hover\` - use it to reveal overlay content on element hover.<br/>
 - \`always\` - use it to display overlay content all the time.<br/>`,
example: '_overlayContentVisibility',
},
{
title: 'Border radius',
description:
'Define border radius in pixels with `borderRadius` prop. Get rid of a default border radius with `removeRoundedBorders` prop.',
example: '_borderRadius',
},
{
title: 'Custom media element',
description: 'Pass a custom `media` element with media prop.',
example: '_customMediaElement',
},
{
title: 'Drag handle',
description:
'Use a compound `<MediaOverlay.DragHandle />` component for reorderable components. Actions should be placed at the top right corner in this scenario. ',
example: '_dragHandle',
},
],
commonUseCaseExamples: [
{
title: 'Social media gallery',
description:
'Use media overlay to place identifying data, such as logo or video duration on top of a media item.',
example: '_socialMediaGallery',
},
{
title: 'Item lists',
description:
'Use media overlay to list down visual items, such as dishes, that can be edited, marked as favourite or interacted with in any other way.',
example: '_itemLists',
},
{
title: 'Image gallery',
description:
'Use media overlay to place static data on top of an image, e.g. to place a counter indicating how many more images there are.',
example: '_imageGallery',
},
{
title: 'Content edit',
description:
'Use media overlay to store actions related to that media element, such as edit, refresh or delete.',
example: '_contentEdit',
},
{
title: 'Reordable list',
description:
'Use middle placement at the center to position recordable element indication. This function should use a compound `<MediaOverlay.DragHandle/>` component.',
example: '_reordableList',
},
],
};