+
+
)
}
}
@@ -230,8 +255,8 @@ AutoRotatingCarousel.defaultProps = {
AutoRotatingCarousel.propTypes = {
/** If `false`, the auto play behavior is disabled. */
autoplay: PropTypes.bool,
- /** Override the inline-styles of the content container. */
- contentStyle: PropTypes.object,
+ /** Object for customizing the CSS classes. */
+ classes: PropTypes.object.isRequired,
/** Delay between auto play transitions (in ms). */
interval: PropTypes.number,
/** Button text. If not supplied, the button will be hidden. */
@@ -243,15 +268,13 @@ AutoRotatingCarousel.propTypes = {
/** Fired when the index changed. Returns current index. */
onChange: PropTypes.func,
/** Fired when the gray background of the popup is pressed when it is open. */
- onRequestClose: PropTypes.func,
+ onClose: PropTypes.func,
/** Fired when the user clicks the getting started button. */
onStart: PropTypes.func,
/** Controls whether the AutoRotatingCarousel is opened or not. */
open: PropTypes.bool,
- /** Override the inline-styles of the root component. */
- style: PropTypes.object,
/** If `true`, the left and right arrows are hidden in the desktop version. */
- hideArrows: PropTypes.bool,
- /** Color of the dots used */
- dotColor: PropTypes.string
+ hideArrows: PropTypes.bool
}
+
+export default withStyles(styles)(AutoRotatingCarousel)
diff --git a/src/AutoRotatingCarousel.md b/src/AutoRotatingCarousel.md
index b254e07..6d71f5b 100644
--- a/src/AutoRotatingCarousel.md
+++ b/src/AutoRotatingCarousel.md
@@ -3,34 +3,37 @@
```
const Slide = require('./Slide').default;
const { red, blue, green } = require('material-ui/colors');
+const Button = require('material-ui/Button').default;
-
- }
- mediaBackgroundStyle={{backgroundColor: red[400]}}
- contentStyle={{backgroundColor: red[600]}}
- title='This is a very cool feature'
- subtitle='Just using this will blow your mind.'
- />
- }
- mediaBackgroundStyle={{backgroundColor: blue[400]}}
- contentStyle={{backgroundColor: blue[600]}}
- title='Ever wanted to be popular?'
- subtitle='Well just mix two colors and your are good to go!'
- />
- }
- mediaBackgroundStyle={{backgroundColor: green[400]}}
- contentStyle={{backgroundColor: green[600]}}
- title='May the force be with you'
- subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
- />
-
+
+ setState({ open: false })}
+ style={{ position: 'absolute' }}
+ >
+ }
+ mediaBackgroundStyle={{ backgroundColor: red[400] }}
+ style={{ backgroundColor: red[600] }}
+ title='This is a very cool feature'
+ subtitle='Just using this will blow your mind.'
+ />
+ }
+ mediaBackgroundStyle={{ backgroundColor: blue[400] }}
+ style={{ backgroundColor: blue[600] }}
+ title='Ever wanted to be popular?'
+ subtitle='Well just mix two colors and your are good to go!'
+ />
+ }
+ mediaBackgroundStyle={{ backgroundColor: green[400] }}
+ style={{ backgroundColor: green[600] }}
+ title='May the force be with you'
+ subtitle='The Force is a metaphysical and ubiquitous power in the Star Wars fictional universe.'
+ />
+
)
@@ -132,13 +145,17 @@ Slide.propTypes = {
* Object to display in the upper half.
*/
media: PropTypes.node.isRequired,
+ /**
+ * Override the inline-styles of the media container.
+ */
+ mediaBackgroundStyle: PropTypes.object,
/**
* Subtitle of the slide.
- **/
+ */
subtitle: PropTypes.string.isRequired,
/**
* Title of the slide.
- **/
+ */
title: PropTypes.string.isRequired,
/**
* If `true`, the screen width and height is filled.