Saltar al contenido
Ayuda a traducir esta página

App Bar

La App Bar muestra información y acciones relacionadas con la pantalla actual.

La top App Bar provee contenido y acciones relacionados a la pantalla actual. It's used for branding, screen titles, navigation, and actions.

Se puede transformar en una barra de acción contextual o usarse como una barra de navegación.

App Bar Simple

News
<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

App Bar con un campo de búsqueda principal

Un campo de búsqueda principal.

Material-UI

App Bar con menú

Photos

App Bar con campo de búsqueda

Un campo de búsqueda al costado.

Material-UI

Denso (sólo escritorio)

Photos
<AppBar position="static">
  <Toolbar variant="dense">
    <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" color="inherit" component="div">
      Photos
    </Typography>
  </Toolbar>
</AppBar>

Prominente

Un App Bar prominente.

Material-UI

App bar en pie de página

Posición Fija

Cuando muestra la posición de la barra de App Bar fija, la dimensión de los elementos no tiene impacto sobre el resto de la página. Esto puede causar que alguna parte de su contenido no sea visible, detrás del App Bar. Aquí hay 3 posibles soluciones:

  1. Puedes usar position = "sticky" en lugar de fijo. ⚠️ sticky is not supported by IE11.
  2. Puedes renderizar un segundo componente <Toolbar />:
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
  1. Puede usar theme.mixins.toolbar CSS:
const useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.Fragment>
  )
};

Desplazamiento

Puede usar el useScrollTrigger () para responder a las acciones de desplazamiento del usuario.

Ocultar App bar

La barra de aplicaciones se oculta al desplazarse hacia abajo para dejar más espacio para leer.

Elevar App Bar

La barra de la aplicación se eleva al desplazarse para comunicar que el usuario no está en la parte superior de la página.

Ir arriba

Aparece un botón de acción flotante al desplazarse para que sea fácil volver a la parte superior de la página.

useScrollTrigger([options]) => trigger

Argumentos

  1. options (Object [optional]):

    • options.disableHysteresis (Boolean [optional]): Default false. Desactiva la histéresis. Ignora la dirección de desplazamiento cuando determina el valor del trigger.
    • options.target (Node [optional]): Default window.
    • options.threshold (Number [optional]): Default 100. Cambia el valor de trigger cuando el desplazamiento vertical cruza estrictamente este umbral (exclusivo).

Regresa

trigger: ¿La posición de desplazamiento coincide con los criterios?

Ejemplos

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hola</div>
    </Slide>
  );
}

API