Подтвердить что ты не робот

Содержимое под фиксированным AppBar

Вероятно, основной вопрос, но я не мог найти никакого примера в документации. Использование material-ui-next beta.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')
);

И я хочу, mui.Paper содержимое mui.Paper отображалось под AppBar, а не скрывалось от него. Есть ли какой-то компонент, которого я где-то не хватает?

Ответ 1

Ваше содержимое находится на экране, но закрыто AppBar. Вы можете использовать theme.mixins.toolbar для загрузки информации о высоте строки приложения и соответственно изменить свой контент:

const styles = theme => ({
  // Load app bar information from the theme
  toolbar: theme.mixins.toolbar,
});

А затем создайте 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>

Здесь происходит то, что theme.mixins.toolbar загружает информацию о размерах AppBar в ваши стили. Затем, применяя эту информацию к div размер div так, что он точно соответствует высоте для перемещения вашего контента по экрану.

Вот полный рабочий пример:

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

Ответ 2

Просто используйте position="sticky" вместо position="fixed" для вашего AppBar.

Ответ 3

Пример Toolbar приложения Elevate просто добавляет пустую 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>
  );
}