@cimpress/react-components
Version:
React components to support the MCP styleguide
108 lines • 4.08 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import CarouselCode from '!raw-loader!./carousel.jsx';
import CarouselDemo from './carousel.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const CarouselDocs = () => {
const propInfos = [
{
name: 'minimal',
type: 'boolean',
default: 'false',
description: 'Whether to show the carousel in minimal mode, with a numerical indicator, or in full mode, with thumbnail images.',
},
{
name: 'size',
type: "one of 'xs', 's', 'm', 'l', 'xl'",
default: 'm',
description: 'Size for the carousel. If carousel is in minimal mode, this size will be ignored in favor of pxSize.',
},
{
name: 'pxSize',
type: 'number',
default: '200',
description: 'Size for the main carousel image, in pixels. Only used when the carousel is in minimal mode.',
},
{
name: 'loading',
type: 'boolean',
default: '',
description: 'If true, the carousel will display a loading spinner.',
},
{
name: 'onCarouselClick',
type: 'function',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "Callback function invoked when the large carousel image is clicked."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(currentSlide: number) ",
'=>',
" void")))),
},
{
name: 'children',
type: 'node',
default: '',
description: 'Images to use as slides for the carousel.',
},
{
name: 'currentSlide',
type: 'number',
default: '0',
description: 'Use this to force the carousel to navigate to a particular slide.',
},
{
name: 'fallbackPreview',
type: 'node',
default: 'Image SVG and caption "No image available"',
description: 'Component to display when the carousel has no images.',
},
{
name: 'landscape',
type: 'boolean',
default: 'false',
description: `Displays the carousel in landscape mode,
with the thumbnails vertically stacked to the left of the carousel.
Not available in minimal mode.`,
},
{
name: 'onSlideChanged',
type: 'function',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "Callback function invoked whenever the carousel navigates to a new slide."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(currentSlide: number) ",
'=>',
" void")))),
},
{
name: 'hideIndicators',
type: 'boolean',
default: 'false',
description: 'Hides navigation and thumbnails for the carousel.',
},
{
name: 'showZoomOverlay',
type: 'boolean',
default: 'false',
description: 'Shows a "zoom in" overlay on hover.',
},
{
name: 'zoomOverlayContent',
type: 'node',
default: '',
description: 'Content to replace the default text for the zoom overlay.',
},
];
return (React.createElement(ComponentDoc, { name: "Carousel", propInfos: propInfos },
React.createElement(CarouselDemo, null),
React.createElement(CodeExample, { code: CarouselCode })));
};
export default CarouselDocs;
//# sourceMappingURL=index.js.map