web-dev-qa-db-fra.com

Contenu sous AppBar fixe

Probablement une question de base, mais je n'ai trouvé aucun exemple dans la documentation. En utilisant material-ui-nextbeta.. J'ai ce qui suit:

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

Et je veux que le mui.Paper le contenu apparaît sous le AppBar, et n'est pas masqué par celui-ci. Y a-t-il un composant qui me manque quelque part?

javascriptreactjsmaterial-ui
13
Roel van Uden

Votre contenu est à l'écran, mais couvert par le AppBar. Vous pouvez utiliser theme.mixins.toolbar pour charger des informations sur la hauteur de la barre d'application et déplacer votre contenu en conséquence:

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

Et puis créez un div au-dessus de votre contenu pour déplacer votre contenu en conséquence:

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

Ce qui se passe ici, c'est que theme.mixins.toolbar charge des informations sur les dimensions AppBar dans vos styles. Ensuite, l'application de ces informations aux div dimensionne le div afin que ce soit exactement la bonne hauteur pour déplacer votre contenu vers le bas de l'écran.

Voici un exemple de travail complet:

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);
16
Jules Dupont

Utilisez simplement position="sticky" au lieu de position="fixed" pour votre AppBar.

7
andy

L'exemple Elevate App Bar ajoute simplement un Toolbar vide:

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>
  );
}
3
Eugene Pakhomov