Barra de aplicaciones

La Barra de aplicaciones muestra información y acciones relacionadas con la pantalla actual.

La barra de aplicación superior proporciona contenido y acciones relacionadas con la pantalla actual. Se utiliza para la marca, los títulos de pantalla, la navegación y las acciones.

Puede transformarse en una barra de acción contextual o utilizarse como barra de navegación.

Barra de aplicación básica

Barra de aplicación con menu

Barra de aplicación con menu responsivo

Barra de aplicación con campo de búsqueda

Una barra de búsqueda lateral.

Barra de aplicación responsiva con cajón

Barra de aplicación con un campo de búsqueda principal

Un campo de búsqueda principal.

Denso (sólo para escritorio)

Prominente

Una barra de aplicaciones prominente.

Barra de acción inferior

Colocación fija

Cuando la posición de la barra de aplicaciones es fija, la dimensión del elemento no afecta al resto de la página. Esto puede causar que alguna parte de tu contenido sea invisible detrás de la barra de aplicaciones. Aquí tienes 3 posibles soluciones:

1. Puedes usar position="sticky" en lugar de fijo.
2. Puedes renderizar un segundo componente <Toolbar />:

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* contenido */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}

3. Puedes utilizar theme.mixins.toolbar CSS:

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* contenido */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

Desplazamiento

Puedes utilizar el hook useScrollTrigger() para responder a las acciones de desplazamiento del usuario.

Ocultar la barra de aplicación

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

Barra de aplicación elevada

La barra de aplicaciones se eleva al desplazarse para comunicar que el usuario no se encuentra en la parte superior de la página.

useScrollTrigger([options]) => trigger

Argumentos

1. options (object [opcional]):

   • options.disableHysteresis (bool [opcional]): Por defecto es false. Desactiva la histéresis. Ignora la dirección de desplazamiento al determinar el valor del trigger.
   • options.target (Node [opcional]): Por defecto es window.
   • options.threshold (number [opcional]): Por defecto es 100. Cambia el valor del trigger cuando el scroll vertical cruza estrictamente este umbral (exclusivo).

Devuelve

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

Ejemplos

import useScrollTrigger from '@u_ui/u-ui/useScrollTrigger';

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

Activar color en modo oscuro

Siguiendo las Material Design guidelines, la propiedad color no tiene efecto en la apariencia de la barra de aplicaciones en modo oscuro. Puedes anular este comportamiento estableciendo la propeidad enableColorOnDark a true.

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

• <AppBar />
• <Menu />
• <Toolbar />