Question

就在最近，我参与了一个新项目，要求我把手放在JS，React和Material-UI上，如果我的问题不够精确，请提前道歉。

我想替换一个用jquery完成的模块，该模块正在处理从页脚用tabber打开的“抽屉”，一旦点击了tabber中的项目，抽屉从页脚上升并且它给用户特定的反应成分渲染到抽屉里。

我想用react组件替换这个元素并考虑使用material-ui，http://www.material-ui.com/#/components/drawer，所以我想修改抽屉从底部而不是从左边出来。更专家可以建议您如何处理这个问题？

谢谢！

P.S。：我已经知道我可以在网上冲浪并找到一个具有类似行为的组件，这个任务更像是一种熟悉JS并做出反应的方法。

P.P.S。：目前该项目依赖于材料-ui v0.20.0，我已经看到了eskers建议的v1。+ beta版本中有一个例子

修改

花了一些时间后，我创建了自己的组件，万一有人需要这个，在我的代码下面。

define(function (require) {

    var React = require('react');
    var DrawerButton = require('./DrawerButton');
    require('./TabbedDrawer.less');

    class TabbedDrawer extends React.Component {
        constructor(props) {
            super(props);
            
            this.state = {
                drawerOpened: false,
                buttonSelected: null,
                drawerHeight: 0
            }
            this.openDrawer = this.openDrawer.bind(this);
            this.renderMyLabels = this.renderMyLabels.bind(this);
        }

        renderMyLabels() {
            var renderedLabels = this.props.labels.map(function(label, _key) {
                return (
                    <DrawerButton 
                        functionDrawer={this.openDrawer}
                        labelKey={_key}
                        buttonSelected={this.state.buttonSelected}
                        drawerOpened={this.state.drawerOpened}>
                        {label}
                    </DrawerButton>
                );
            }, this);
            return renderedLabels;
        }

        openDrawer(buttonClicked) {
            if(this.state.drawerOpened && (buttonClicked == this.state.buttonSelected)) {
                this.setState({buttonSelected: null,
                               drawerOpened: !this.state.drawerOpened});
            } else if(this.state.drawerOpened && (buttonClicked != this.state.buttonSelected))  {
                this.setState({buttonSelected: buttonClicked});
            } else {
                this.setState({buttonSelected: buttonClicked,
                               drawerOpened: !this.state.drawerOpened});
            }
        }

        render() {
            const ElementToRender = (this.state.buttonSelected !== null) ? this.props.children[this.state.buttonSelected] : null;
            const myElement = (ElementToRender !== null) ? <ElementToRender /> : "";
            const drawerStyle = this.state.drawerOpened ? {display: 'block'} : {display: 'none'};
            const tabStyle = this.state.drawerOpened ? {bottom: '250px'} : {bottom: '0px'};
            return (
                <div id="geppettoDrawer">
                    <span id="tabber" style={tabStyle}>
                        {this.renderMyLabels()}
                    </span>
                    <div id="drawer" style={drawerStyle}>
                        <div className="topLine" >
                        </div>
                        {myElement}
                    </div>
                </div>
            );
        }
    }
    return TabbedDrawer;
});

@import "./../../../../style/less/components/colors";

@-webkit-keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

#geppettoDrawer {
display: inline-block;
}

#tabber {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  border-bottom: 0.5px solid rgb(252, 99, 32);
  width: 100%;
  display: block;
  margin-top: 0px;
  text-decoration: none;
  left: 0;
  bottom: 0;
  position: absolute;
  background: transparent;
}

#tabButton {
  color: @primary_color;
	margin: 0 auto;
	margin-bottom: 26px;
  position: relative;
  border-color: rgb(252, 99, 32);
  border: 0.5px;
  border-bottom: 0px;
	border-style: solid;
	box-shadow: none;
	text-shadow: none;
	width: 140px;
	height: 35px;
  padding: 7px 20px;
  text-align: center;
  display: inline-block;
  cursor: pointer!important;
  background: rgba(50, 50, 53, 0.8);
}

#drawer {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  height: 250px;
  width: 100%;
  background-color: black;
  color: white;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: none;
  transition: opacity 1s ease-out;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  background: rgba(50, 50, 53, 0.8);
}

#drawer.topLine {
  border-top: solid rgb(243, 250, 247); /* 1px for the "border" size */
  cursor: n-resize;
  resize: horizontal;
}

define(function (require) {

    var React = require('react');
    require('./TabbedDrawer.less');


    class DrawerButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                mouseOver: false,
                buttonActived: false}

            this.activeButton = this.activeButton.bind(this);
            this.overButton = this.overButton.bind(this);
            this.outButton = this.outButton.bind(this);
        }

        activeButton() {
            if((this.props.labelKey === this.props.buttonSelected) && this.props.drawerOpened)
                this.setState({buttonActived: true,
                               mouseOver: false});
            else 
                this.setState({buttonActived: false,
                               mouseOver: false});
            this.props.functionDrawer(this.props.labelKey);
        }

        overButton() {
            if((this.state.buttonActived === false))
                this.setState({mouseOver: true});
        }

        outButton() {
            if(!this.props.drawerOpened)
                this.setState({buttonActived: false});
            if((this.state.buttonActived === false))
                this.setState({mouseOver: false});
        }

        render() {
            if(this.props.labelKey === this.props.buttonSelected) {
                var buttonStyle = {background: 'rgba(252, 99, 32, 0.8)', color: 'rgba(50, 50, 53)'};
            } else {
                var buttonStyle = (this.state.mouseOver) ? {background: 'rgba(252, 99, 32, 0.8)', 
                                                           color: 'rgba(50, 50, 53)'} : 
                                                          {background: 'rgba(50, 50, 53, 0.8)',
                                                           color: 'rgba(252, 99, 32)'};
            }
            return (
                <span
                    id="tabButton"
                    onClick={this.activeButton} 
                    onMouseOver={this.overButton}
                    onMouseOut={this.outButton}
                    style={buttonStyle}>
                    {this.props.children}
                </span>
            );
        }
    }
    return DrawerButton;
})

Answer 1

如果目标是更熟悉JS和React，我会用它构建一堆不同的东西，没有更好的方法来学习imo。您是否已使用旧版本的Material-UI？在v1。+中有一个例子可以为你做到这一点。请参阅以下链接https://material-ui-next.com/demos/drawers/

祝你好运

material-ui抽屉位置

1 个答案: