关于CSS：打开时如何使Material-UI Drawer“压缩”其他内容

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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 (

<Drawer open={this.state.drawerOpen}>

<RaisedButton onClick={() => this.setState({ drawerOpen: false }) }>X</RaisedButton>

{this.props.children}
</Drawer>

<RaisedButton onClick={() => this.setState({ drawerOpen: true }) }>Open</RaisedButton>

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.
<center>[wp_ad_camp_2]</center>
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.

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.

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.

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.

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.

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.

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.

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.


);
}

}

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

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