css - Material-UI Drawer打开时如何获取到 'squeeze'其他内容

Question

如果有人熟悉 css 和 Material UI，我们将不胜感激。基本上，我正在尝试实现一个 Material UI Drawer 组件，该组件在打开时不仅会滑出页面内容的顶部，而且页面内容会在抽屉周围保持一致，即挤压或展开。我在我的元素中使用引导行和容器，但我不知道如何使用它们来实现这一点。以下是我的组件的布局方式:

<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”库(它允许样式根据您传入的动态 Prop 进行更改)我能够创建一个包装器组件，它接受一个“折叠” Prop ，动画向右滑动等于抽屉的宽度(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/

同一个校长。您将您的内容向右移动与抽屉宽度相同的距离，并使用相同的过渡/动画......这可以通过使用某种形式或宽度、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')
);