打开时如何获取Material-UI Drawer来“压缩"其他内容 [英] How to get Material-UI Drawer to 'squeeze' other content when open

问题描述

如果有人熟悉css和Material UI，对此将提供任何帮助. 基本上，我试图实现一个Material UI Drawer组件，该组件在打开时不仅会滑出页面内容的顶部，而且页面内容会在抽屉周围保持一致，即挤压或扩展.我在项目中使用引导行和容器，但是我不知道如何使用它们来实现这一点.这是我的组件的布局方式:

If anyone is familiar with css and Material UI any help with this would be much appreciated. Basically I'm trying to implement a Material UI Drawer component which when opened doesn't just slide out over the top of the page content, but rather the page content conforms around the drawer i.e squeezes or expands. I'm using bootstrap rows and containers in my project, but I have no clue how I'd use them to achieve this. Here's how my component is laid out:

<div>
    <AppBar
    onLeftIconButtonTouchTap={this.handleToggle}
      title="Imaginary Company"
    />
    <Row>
      <QuotesList />
    </Row>
    <Drawer
    containerStyle={{ top: 64, width:150 }}
    open={this.state.open}
    >
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  </div>

请注意，"top"属性仅是因为我希望在打开或关闭抽屉的情况下仍能显示应用栏的顶部标题区域. 一如既往，任何帮助都将是惊人的！干杯

Note the 'top' property is just because I want the top title area of the App Bar to remain visible with the drawer open or close. As always any help would be amazing! Cheers

更新:我发现了一种适用于我的hacky解决方案.使用很棒的'styled-components'库(它允许样式根据传入的动态道具而改变)，我能够创建一个包装器组件，该组件接受一个'collapsed'道具，并且动画向右滑动到与抽屉相同.宽度(150).如果有人偶然发现了这一点，并且感兴趣，这是我的styled-components代码(那里也有一些复制和粘贴的bootstrap容器样式):

UPDATE: I've found a kind of hacky solution that's working for me. Using the awesome 'styled-components' library (which allows styles to change based on dynamic props you pass in) I was able to create a wrapper component which accepts a 'collapsed' prop, with an animation sliding to the right equal to the drawer's width (150). If anyone stumbles upon this and they're interested here's my code in styled- components (there's a few copied and pasted bootstrap container styles in there as well) :

const CollapsibleContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
$:after {
content: "";
display: table;
clear: both;
}
position: absolute;
right: 0;
left: ${props => props.collapsed ? '150px' : '0'}!important;
transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
`; 

也许这不是完美的解决方案，但看起来不错.希望这对某人有帮助:)

Maybe this isn't the perfect solution but it looks fine. Hope this helps someone maybe :)

推荐答案

也许类似于您的"hacky"解决方案，但这是一个jsFiddle: https://jsfiddle.net/88uq8751/3/

Similar to your "hacky" solution perhaps, but here's a jsFiddle: https://jsfiddle.net/88uq8751/3/

相同的主教.您可以将内容向右微调与抽屉宽度相同的距离，并使用相同的过渡/动画...这可以通过多种方式来完成，方法是使用某种形式或组合的宽度，marginLeft，绝对位置，甚至可以是transform:translate ，但我在下面使用了marginLeft:

Same prinicipal. You nudge your content rightward the same distance as the drawer's width, and using the same transition/animation... This could be accomplished in a variety of ways using some form or combo of width, marginLeft, absolute position, maybe even transform:translate, but I used marginLeft below:

const { Drawer, RaisedButton, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { drawerOpen: false };
  }

  render() {
    const contentStyle = {  transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    if (this.state.drawerOpen) {
      contentStyle.marginLeft = 256;
    }

    return (
      <div>
        <Drawer open={this.state.drawerOpen}>
          <div style={{ textAlign: 'right' }}>
            <RaisedButton onClick={() => this.setState({ drawerOpen: false }) }>X</RaisedButton>
          </div>
          {this.props.children}
        </Drawer>
        <div style={contentStyle}>
          <RaisedButton onClick={() => this.setState({ drawerOpen: true }) }>Open</RaisedButton>
          <p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p><p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p><p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p>        
        </div>
    </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme() }>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

这篇关于打开时如何获取Material-UI Drawer来“压缩"其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！