就在最近,我参与了一个新项目,要求我把手放在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;
})
答案 0 :(得分:0)
如果目标是更熟悉JS和React,我会用它构建一堆不同的东西,没有更好的方法来学习imo。您是否已使用旧版本的Material-UI?在v1。+中有一个例子可以为你做到这一点。请参阅以下链接https://material-ui-next.com/demos/drawers/
祝你好运