javascript 固定 AppBar 下的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48508449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Content beneath fixed AppBar
提问by Hozuki
Probably a basic question, but I couldn't find any example in the documentation. Using material-ui-nextbeta.30. I have the following:
可能是一个基本问题，但我在文档中找不到任何示例。使用material-ui-nextbeta.30。我有以下几点：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as mui from 'material-ui';
import 'typeface-roboto';
function App() {
return (
<div>
<mui.Reboot />
<mui.AppBar color="primary" position="fixed">
<mui.Toolbar>
<mui.Typography color="inherit" type="title">
My Title
</mui.Typography>
</mui.Toolbar>
</mui.AppBar>
<mui.Paper>
My Content
</mui.Paper>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
And I want the mui.Papercontent appear beneaththe AppBar, and not hidden by it. Is there a component I'm missing somewhere?
而我想要的mui.Paper内容出现下面的AppBar，而不是它隐藏。是否有我在某处丢失的组件？
回答by andy
Just use position="sticky"instead of position="fixed"for your AppBar.
只需将position="sticky"而不是position="fixed"用于您的 AppBar。
回答by Jules Dupont
Your content is on screen, but covered up by the AppBar. You can use theme.mixins.toolbarto load information about the app bar height and shift your content accordingly:
您的内容在屏幕上，但被AppBar. 您可以使用theme.mixins.toolbar加载有关应用栏高度的信息并相应地移动您的内容：
const styles = theme => ({
// Load app bar information from the theme
toolbar: theme.mixins.toolbar,
});
And then create a divabove your content to shift your content accordingly:
然后div在您的内容上方创建一个以相应地移动您的内容：
<Paper>
<div className={classes.toolbar} />
MyContent will be shifted downwards by the div above. If you remove
the div, your content will disappear under the app bar.
</Paper>
What's happening here is that theme.mixins.toolbaris loading information about the AppBardimensions into your styles. Then, applying that information to the divsizes the divso that it's exactly the right height for shifting your content down the screen.
这里发生的事情theme.mixins.toolbar是将有关AppBar尺寸的信息加载到您的样式中。然后，将这些信息应用于div尺寸div，使其恰好是将内容向下移动到屏幕的正确高度。
Here's a full working example:
这是一个完整的工作示例：
import React from 'react';
import Paper from 'material-ui/Paper';
import Reboot from 'material-ui/Reboot';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';
const styles = (theme) => ({
toolbar: theme.mixins.toolbar,
});
const App = (props) => {
const { classes } = props;
return (
<div>
<Reboot />
<AppBar color="primary" position="fixed">
<Toolbar>
<Typography color="inherit" type="title">
My Title
</Typography>
</Toolbar>
</AppBar>
<Paper>
<div className={classes.toolbar} />
MyContent will be shifted downwards by the div above. If you remove
the div, your content will disappear under the app bar.
</Paper>
</div>
);
}
export default withStyles(styles)(App);
回答by Eugene Pakhomov
The Elevate App Bar examplejust adds an empty Toolbar:
在提升应用程序栏例子只是增加了一个空的Toolbar：
export default function ElevateAppBar(props) {
return (
<React.Fragment>
<CssBaseline />
<ElevationScroll {...props}>
<AppBar>
<Toolbar>
<Typography variant="h6">Scroll to Elevate App Bar</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar /> // <-- The important part.
<Container>
<Box my={2}>
{[...new Array(12)]
.map(
() => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
)
.join('\n')}
</Box>
</Container>
</React.Fragment>
);
}
