136 | )
137 | }
138 |
139 | Slide.propTypes = {
140 | /**
141 | * Useful to extend the style applied to components.
142 | */
143 | classes: PropTypes.object.isRequired,
144 | /**
145 | * Object to display in the upper half.
146 | */
147 | media: PropTypes.node.isRequired,
148 | /**
149 | * Override the inline-styles of the media container.
150 | */
151 | mediaBackgroundStyle: PropTypes.object,
152 | /**
153 | * Subtitle of the slide.
154 | */
155 | subtitle: PropTypes.string.isRequired,
156 | /**
157 | * Title of the slide.
158 | */
159 | title: PropTypes.string.isRequired,
160 | /**
161 | * If `true`, the screen width and height is filled.
162 | * @ignore
163 | */
164 | mobile: PropTypes.bool,
165 | /**
166 | * If `true`, slide will adjust content for wide mobile screens.
167 | * @ignore
168 | */
169 | landscape: PropTypes.bool
170 | }
171 |
172 | export default withStyles(styles)(Slide)
173 |
--------------------------------------------------------------------------------
/src/AutoRotatingCarousel.md:
--------------------------------------------------------------------------------
1 | ### Desktop mode
2 |
3 | ```
4 | const Slide = require('./Slide').default;
5 | const { red, blue, green } = require('@material-ui/core/colors');
6 | const Button = require('@material-ui/core/Button').default;
7 |
8 | const [open, setOpen] = React.useState(false);
9 |
10 |
11 |
12 | setOpen(false)}
16 | onStart={() => setOpen(false)}
17 | style={{ position: 'absolute' }}
18 | >
19 | }
21 | mediaBackgroundStyle={{ backgroundColor: red[400] }}
22 | style={{ backgroundColor: red[600] }}
23 | title='This is a very cool feature'
24 | subtitle='Just using this will blow your mind.'
25 | />
26 | }
28 | mediaBackgroundStyle={{ backgroundColor: blue[400] }}
29 | style={{ backgroundColor: blue[600] }}
30 | title='Ever wanted to be popular?'
31 | subtitle='Well just mix two colors and your are good to go!'
32 | />
33 | }
35 | mediaBackgroundStyle={{ backgroundColor: green[400] }}
36 | style={{ backgroundColor: green[600] }}
37 | title='May the force be with you'
38 | subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
39 | />
40 |
41 |
54 |
55 | setOpen(false)}
59 | onStart={() => setOpen(false)}
60 | mobile
61 | autoplay={false}
62 | style={{ position: 'absolute' }}
63 | >
64 | }
66 | mediaBackgroundStyle={{ backgroundColor: red[400] }}
67 | style={{ backgroundColor: red[600] }}
68 | title='1 This is a very cool feature'
69 | subtitle='Just using this will blow your mind.'
70 | />
71 | }
73 | mediaBackgroundStyle={{ backgroundColor: blue[400] }}
74 | style={{ backgroundColor: blue[600] }}
75 | title='2 Ever wanted to be popular?'
76 | subtitle='Well just mix two colors and your are good to go!'
77 | />
78 | }
80 | mediaBackgroundStyle={{ backgroundColor: green[400] }}
81 | style={{ backgroundColor: green[600] }}
82 | title='3 May the force be with you'
83 | subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
84 | />
85 | }
87 | mediaBackgroundStyle={{ backgroundColor: green[400] }}
88 | style={{ backgroundColor: green[600] }}
89 | title='4 May the force be with you'
90 | subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
91 | />
92 | }
94 | mediaBackgroundStyle={{ backgroundColor: green[400] }}
95 | style={{ backgroundColor: green[600] }}
96 | title='5 May the force be with you'
97 | subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
98 | />
99 | }
101 | mediaBackgroundStyle={{ backgroundColor: green[400] }}
102 | style={{ backgroundColor: green[600] }}
103 | title='6 May the force be with you'
104 | subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
105 | />
106 |
107 |
257 |
258 |
259 | )
260 | }
261 | }
262 |
263 | AutoRotatingCarousel.defaultProps = {
264 | autoplay: true,
265 | interval: 3000,
266 | mobile: false,
267 | open: false,
268 | hideArrows: false
269 | }
270 |
271 | AutoRotatingCarousel.propTypes = {
272 | /** If `false`, the auto play behavior is disabled. */
273 | autoplay: PropTypes.bool,
274 | /** Properties applied to the [Button](https://material-ui.com/api/button/) element. */
275 | ButtonProps: PropTypes.object,
276 | /** Object for customizing the CSS classes. */
277 | classes: PropTypes.object.isRequired,
278 | /** Override the inline-styles of the carousel container. */
279 | containerStyle: PropTypes.object,
280 | /** Delay between auto play transitions (in ms). */
281 | interval: PropTypes.number,
282 | /** Button text. If not supplied, the button will be hidden. */
283 | label: PropTypes.string,
284 | /** If `true`, slide will adjust content for wide mobile screens. */
285 | landscape: PropTypes.bool,
286 | /** If `true`, the screen width and height is filled. */
287 | mobile: PropTypes.bool,
288 | /** Properties applied to the [Modal](https://material-ui.com/api/modal/) element. */
289 | ModalProps: PropTypes.object,
290 | /** Fired when the index changed. Returns current index. */
291 | onChange: PropTypes.func,
292 | /** Fired when the gray background of the popup is pressed when it is open. */
293 | onClose: PropTypes.func,
294 | /** Fired when the user clicks the getting started button. */
295 | onStart: PropTypes.func,
296 | /** Controls whether the AutoRotatingCarousel is opened or not. */
297 | open: PropTypes.bool,
298 | /** If `true`, the left and right arrows are hidden in the desktop version. */
299 | hideArrows: PropTypes.bool
300 | }
301 |
302 | export default withStyles(styles)(AutoRotatingCarousel)
303 |
--------------------------------------------------------------------------------