javascript - Material UI 中的幻灯片来自屏幕边缘

问题描述

Slide in Material UI 过渡从屏幕边缘开始，有什么办法可以限制卡片组件内部的交易。我已经发布了下面的代码来强调这个问题。我的目标是确保过渡在组件边界内开始和结束

例如在下面的代码中，我希望转换在卡片 Material UI 组件中开始和结束

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

标签： javascriptcssmaterial-ui

javascript - Material UI 中的幻灯片来自屏幕边缘

问题描述

解决方案

推荐阅读