web-dev-qa-db-ja.com

Material-UI BottomNavigationはデフォルトではスティッキーではありません

BottomNavigation コンポーネントをスティッキーにする方法は？デフォルトでスティッキーではないのはなぜですか？

reactjsmaterial-designmaterial-ui
15
Kris MP

次のCSSを使用すると、BottomNavigationを画面の下部に固定できます。

const styles = {
  stickToBottom: {
    width: '100%',
    position: 'fixed',
    bottom: 0,
  },
};

次に、それをBottomNavigationコンポーネントに適用します。

<BottomNavigation className={classes.stickToBottom}>

position: 'fixed'を使用すると、下部のナビゲーションコンポーネントがコンテンツを覆います（同様に、マージンを使用しない場合、画面の上部に貼り付けられたAppBarもコンテンツを覆います）。コンテンツが非表示にならないようにするには、marginBottomまたは他の種類のパディングを提供する必要があります。

positionやstickyなど、他のabsoluteオプションのいくつかをいじることもできます。ただし、私の経験では、fixedがニーズに最も近いオプションです。

25
Jules Dupont

<header> by componentのAppBar属性。

0
EoneZhang

誰がAppBar内でそれを使用する必要があるかについては、ミキシングによってパディングの競合が発生することはありません。

  <AppBar position="fixed" color="primary" style={{top: "auto", bottom: 0}}>
    <BottomNavigation value={0} onChange={(event, newValue) => {}}>
      <BottomNavigationAction label="One" icon={<LocationOnIcon/>}/>
      <BottomNavigationAction label="Two" icon={<LocationOnIcon/>}/>
    </BottomNavigation>
  </AppBar>
0
panchicore