web-dev-qa-db-ja.com

固定AppBarの下のコンテンツ

おそらく基本的な質問ですが、ドキュメントには例が見つかりませんでした。 material-ui-nextbeta.を使用します。私は次のものを持っています：

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コンテンツが表示されますbeneathAppBar。どこかに欠けているコンポーネントはありますか？

javascriptreactjsmaterial-ui
13
Roel van Uden

コンテンツは画面上にありますが、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);
16
Jules Dupont

AppBarにposition="sticky"の代わりにposition="fixed"を使用するだけです。

7
andy

アプリバーの昇格の例 は、空の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>
  );
}
3
Eugene Pakhomov