Javascript 滑入材质界面来自屏幕边缘
滑入材质界面转换从屏幕边缘开始,是否有任何方法可以限制卡组件内的交易。 我在下面贴了代码来强调这个问题。我的目标是确保转换在组件边界内开始和结束 例如,在下面的代码中,我希望转换在card Material UI组件中开始和结束Javascript 滑入材质界面来自屏幕边缘,javascript,css,material-ui,Javascript,Css,Material Ui,滑入材质界面转换从屏幕边缘开始,是否有任何方法可以限制卡组件内的交易。 我在下面贴了代码来强调这个问题。我的目标是确保转换在组件边界内开始和结束 例如,在下面的代码中,我希望转换在card Material UI组件中开始和结束 import React from 'react'; import Card from '@material-ui/core/Card'; import { IconButton, CardContent, Slide, Paper } from "@material-
import React from 'react';
import Card from '@material-ui/core/Card';
import { IconButton, CardContent, Slide, Paper } from "@material-ui/core";
import { Settings } from "@material-ui/icons"
import { withStyles } from '@material-ui/core/styles'
const styles = {
card: {
minWidth: 560,
},
cardContent: {
padding: 8,enter code here
display: 'flex',
justifyContent: 'flex-end'
},
smallIcon: {
width: 36,
height: 36,
padding: 0,
},
paper: {
width: "400px",
height: "320px",
zIndex: 1,
position: "absolute",
backgroundColor: "#000000",
top: "20%",
}
}
class SimpleCard extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props)
this.state = {
gearIconClick: ""
}
}
chartFilterSlider = (evt) => {
debugger
var clicked = evt.currentTarget.translate
console.log("clicked", clicked)
this.setState({
gearIconClick: clicked
})
}
render() {
const { classes, } = this.props
const { gearIconClick } = this.state
//console.log("gearIconClick",gearIconClick)
return (
<Card className={classes.card}>
<CardContent className={classes.cardContent} >
<IconButton className={classes.smallIcon} onClick={this.chartFilterSlider}>
<Settings />
</IconButton>
{gearIconClick ?
<Slide direction="left" in={true} mountOnEnter unmountOnExit>
<Paper elevation={4} className={classes.paper}>
hello
</Paper>
</Slide>
:
<div></div>
}
</CardContent>
{this.props.children}
</Card>
);
}
}
export default withStyles(styles)(SimpleCard)
Excepted :
Is there any way we can limit the transaction inside the card component.
Actual output:
Slider in Material UI comes from the edge of the screen
添加溢出:隐藏到卡,它应该执行此任务。添加溢出:隐藏到卡,它应该执行此任务