Created
June 14, 2016 14:19
-
-
Save hoschi/21e5fc25646615cf2ac153487f181b8e to your computer and use it in GitHub Desktop.
FAB with icon - hover problem
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import IconEdit from 'material-ui/svg-icons/image/edit'; | |
import FloatingActionButton from 'material-ui/FloatingActionButton'; | |
// ... | |
<FloatingActionButton onTouchTap={() => window.open('http://google.de', '_blank')}> | |
<IconEdit/> | |
</FloatingActionButton> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// examples/webpack-example/src/app/Main.js | |
/** | |
* In this file, we create a React component | |
* which incorporates components providedby material-ui. | |
*/ | |
import React from 'react'; | |
import RaisedButton from 'material-ui/RaisedButton'; | |
import Dialog from 'material-ui/Dialog'; | |
import {deepOrange500} from 'material-ui/styles/colors'; | |
import FlatButton from 'material-ui/FlatButton'; | |
import IconEdit from 'material-ui/svg-icons/image/edit'; | |
import FloatingActionButton from 'material-ui/FloatingActionButton'; | |
import getMuiTheme from 'material-ui/styles/getMuiTheme'; | |
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; | |
const styles = { | |
container: { | |
textAlign: 'center', | |
paddingTop: 200, | |
}, | |
}; | |
const muiTheme = getMuiTheme({ | |
palette: { | |
accent1Color: deepOrange500, | |
}, | |
}); | |
class Main extends React.Component { | |
constructor(props, context) { | |
super(props, context); | |
this.handleRequestClose = this.handleRequestClose.bind(this); | |
this.handleTouchTap = this.handleTouchTap.bind(this); | |
this.state = { | |
open: false, | |
}; | |
} | |
handleRequestClose() { | |
this.setState({ | |
open: false, | |
}); | |
} | |
handleTouchTap() { | |
this.setState({ | |
open: true, | |
}); | |
} | |
render() { | |
const standardActions = ( | |
<FlatButton | |
label="Ok" | |
secondary={true} | |
onTouchTap={this.handleRequestClose} | |
/> | |
); | |
return ( | |
<MuiThemeProvider muiTheme={muiTheme}> | |
<div style={styles.container}> | |
<Dialog | |
open={this.state.open} | |
title="Super Secret Password" | |
actions={standardActions} | |
onRequestClose={this.handleRequestClose} | |
> | |
1-2-3-4-5 | |
</Dialog> | |
<h1>material-ui</h1> | |
<h2>example project</h2> | |
<FloatingActionButton onTouchTap={() => window.open('http://google.de', '_blank')}> | |
<IconEdit/> | |
</FloatingActionButton> | |
</div> | |
</MuiThemeProvider> | |
); | |
} | |
} | |
export default Main; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment