打开时如何让 Material-UI 抽屉到 'squeeze' 其他内容

Question

如果有人熟悉 css 和 Material UI，我们将不胜感激。基本上我正在尝试实现一个 Material UI 抽屉组件，当它打开时不只是滑出页面内容的顶部，而是页面内容符合抽屉周围即挤压或扩展.我在我的项目中使用 bootstrap 行和容器，但我不知道如何使用它们来实现这一点。这是我的组件的布局方式：

<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' 属性只是因为我希望 App Bar 的顶部标题区域在抽屉打开或关闭时保持可见。一如既往，任何帮助都会很棒！干杯

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

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;
`;

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

Answer 1

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

同一个校长。您将内容向右移动与抽屉宽度相同的距离，并使用相同的 transition/animation... 这可以通过使用某种形式或宽度、marginLeft、绝对位置的组合，甚至 transform:translate，但我在下面使用了 marginLeft：

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 抽屉到 'squeeze' 其他内容

How to get Material-UI Drawer to 'squeeze' other content when open

css

reactjs

material-ui