Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

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. Es usada para mostrar logotipos de marcas, t铆tulos de pantalla, navegaci贸n y acciones.

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" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      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" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" color="inherit">
      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 no es compatible con IE 11.
  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>{/* contenido */}</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>
  );
}