UNPKG

@cimpress/react-components

Version:

React components to support the MCP styleguide

gitlab.com/Cimpress-Technology/internal-open-source/component-library/react-components

46 lines • 3.98 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); const react_1 = __importDefault(require("react")); const react_components_1 = require("@cimpress/react-components"); /* eslint-disable jsx-a11y/alt-text */ const CarouselDemo = () => (react_1.default.createElement("div", null, react_1.default.createElement("div", { className: "row" }, react_1.default.createElement("div", { className: "col-md-6" }, react_1.default.createElement("h5", null, "Small carousel with thumbnails"), react_1.default.createElement(react_components_1.Carousel, { size: "s", showZoomOverlay: true }, react_1.default.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }))), react_1.default.createElement("div", { className: "col-md-6" }, react_1.default.createElement("h5", null, "Medium carousel in landscape mode"), react_1.default.createElement(react_components_1.Carousel, { size: "m", landscape: true }, react_1.default.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" })))), react_1.default.createElement("div", { className: "row" }, react_1.default.createElement("div", { className: "col-md-4" }, react_1.default.createElement("h5", null, "Minimal carousel at 100px"), react_1.default.createElement(react_components_1.Carousel, { minimal: true, pxSize: 100, showZoomOverlay: true }, react_1.default.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }), react_1.default.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" }))), react_1.default.createElement("div", { className: "col-md-4" }, react_1.default.createElement("h5", null, "Extra small carousel with no slides"), react_1.default.createElement(react_components_1.Carousel, { size: "xs" })), react_1.default.createElement("div", { className: "col-md-4" }, react_1.default.createElement("h5", null, "Extra small carousel in a loading state"), react_1.default.createElement(react_components_1.Carousel, { loading: true, size: "xs" }))))); exports.default = CarouselDemo; //# sourceMappingURL=carousel.js.map