web-dev-qa-db-fra.com

Material-UI BottomNavigation n'est pas collant par défaut

Comment rendre BottomNavigation le composant collant? Pourquoi ce n'est pas collant par défaut?

reactjsmaterial-designmaterial-ui
11
Kris MP

Vous pouvez faire coller BottomNavigation au bas de votre écran avec le CSS suivant:

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

Et puis l'appliquer à votre composant BottomNavigation:

<BottomNavigation className={classes.stickToBottom}>

Vous devez savoir que le position: 'fixed' fera que le composant de navigation inférieur couvrira votre contenu (de même, le AppBar collé en haut de votre écran couvre également le contenu si vous n'utilisez pas de marge). Vous devrez fournir un marginBottom ou un autre type de remplissage pour vous assurer qu'aucun de votre contenu n'est masqué.

Vous pouvez également jouer avec certaines des autres options position, telles que sticky ou absolute. Cependant, d'après mon expérience, fixed est l'option qui correspond le mieux à vos besoins.

20
Jules Dupont

Pour qui doit l'utiliser dans un AppBar, le mixage ne causera aucun conflit de remplissage.

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