Skip to content

Instantly share code, notes, and snippets.

@hoschi
Created June 14, 2016 14:19
Show Gist options
  • Save hoschi/21e5fc25646615cf2ac153487f181b8e to your computer and use it in GitHub Desktop.
Save hoschi/21e5fc25646615cf2ac153487f181b8e to your computer and use it in GitHub Desktop.
FAB with icon - hover problem
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>
// 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