material-ui抽屉位置

Question

just recently I got involved in a new project that required me to put my hands on JS, React and Material-UI so apologies in advance if my question won't be precise enough.

I want to replace a module done with jquery that is handling a "drawer" that is opened from the footer with a tabber, once clicked on the items in the tabber the drawer go up from the footer and it gives to the user that specific react component rendered into the drawer.

I would like to replace this element with a react component and thought about using material-ui for this, http://www.material-ui.com/#/components/drawer , so I would like to modify the drawer to came out from the bottom and not from the left. Can someone more expert suggest how would you approach this?

Thanks!

PS: I already know I can surf the web and find a component with a similar behaviour, this task is more a way to get familiar with JS and react.

PPS: Currently the project relies on material-ui v0.20.0, I already saw that there is an example in the v1.+ beta release as suggested by eskers

Edit

After have spent a bit of time I created my own component, in case someone will need this, below my code.

 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

If the goal is to get more familiar with JS and React, I would just build a bunch of different things with it, no better way to learn imo. Are you locked into using an older version of Material-UI? In v1.+ there is an example that will do just that for you. Please see the following link https://material-ui-next.com/demos/drawers/

best of luck