材料用户界面抽屉位置

Question

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

我想替换一个使用 jquery 完成的模块，该模块正在处理一个"抽屉"，该抽屉用 taber 从页脚打开，一旦单击标签中的项目，抽屉就会从页脚上升，它为用户提供特定的反应组件呈现到抽屉中。

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

谢谢！

PS：我已经知道我可以上网并找到具有类似行为的组件，此任务更像是一种熟悉JS并做出反应的方式。

P.P.S.：目前该项目依赖于 material-UI v0.20.0，我已经看到 v1.+ beta 版本中有一个 eskers 建议

的示例编辑

在花了一点时间之后，我在我的代码下面创建了自己的组件，以防有人需要它。

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/

祝你好运