TopAppBarTop App Bar

El componente Top App Bar muestra información clave y acciones relacionadas en la parte superior de la página, con una navegación clara y acceso directo a las acciones.

Uso

Importa los componentes cuando los necesites:

import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';

Importa los tipos TypeScript cuando los necesites:

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';

Uso: (Nota: el style="position: relative" en el ejemplo es solo para demostración; elimina este estilo en uso real.)

Título

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>

Notas importantes:

Este componente usa position: fixed por defecto y añade automáticamente padding-top al body para evitar que el contenido de la página quede oculto por el componente.

Sin embargo, en los dos casos siguientes, se usará position: absolute por defecto:

Cuando se indica el atributo scroll-target. En este caso, se añade padding-top al elemento scroll-target.
Cuando está dentro del componente <mdui-layout></mdui-layout>. En este caso, no se añade padding-top.

Ejemplos

Dentro de un contenedor especificado

Por defecto, la barra de aplicaciones superior se muestra en la parte superior de la página, tomando la ventana como referencia.

Si quieres colocar la barra de aplicaciones superior dentro de un contenedor específico, define el atributo scroll-target en el componente <mdui-top-app-bar>. El valor debe ser el selector CSS o elemento DOM del contenedor con contenido desplazable. En este caso, la barra de aplicaciones superior se posicionará tomando como referencia el elemento padre (debes añadir manualmente los estilos position: relative; overflow: hidden al elemento padre).

Título

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

Forma

El atributo variant en el componente <mdui-top-app-bar> para establecer la forma de la barra de aplicaciones superior.

Título

center-aligned

small

medium

large

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-variant" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">
      <mdui-segmented-button-group selects="single" value="small">
        <mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
        <mdui-segmented-button value="small">small</mdui-segmented-button>
        <mdui-segmented-button value="medium">medium</mdui-segmented-button>
        <mdui-segmented-button value="large">large</mdui-segmented-button>
      </mdui-segmented-button-group>
    </div>
  </div>
</div>

<script>
  const topAppBar = document.querySelector(".example-variant-bar");
  const segmentedButtonGroup = document.querySelector(".example-variant");

  segmentedButtonGroup.addEventListener("change", (event) => {
    topAppBar.variant = event.target.value;
  });
</script>

Fuente

Comportamiento al desplazar la página

El atributo scroll-behavior en el componente <mdui-top-app-bar> define cómo se comporta la barra de aplicaciones superior al desplazarse por la página. Se pueden establecer varios comportamientos separándolos con espacios.

Los comportamientos de desplazamiento incluyen:

hide: Oculta la barra de aplicaciones superior al desplazarse hacia abajo y la muestra al desplazarse hacia arriba.
shrink: Solo efectivo cuando el atributo variant es medium o large. Expande la barra de aplicaciones superior al desplazarse hacia abajo y la contrae al desplazarse hacia arriba.
elevate: Añade una sombra a la barra de aplicaciones superior al desplazarse hacia abajo; elimina la sombra cuando se vuelve al principio de la página.

El atributo scroll-threshold define cuántos píxeles desplazar antes de activar el comportamiento de desplazamiento de la barra de aplicaciones superior. (Nota: para una respuesta rápida, cuando se usa el comportamiento elevate, no establezcas el atributo scroll-threshold).

Ejemplo: ocultar al desplazar

Título

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-hide"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-hide" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

Ejemplo: añadir sombra al desplazar

Título

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="elevate"
    scroll-target=".example-scroll-behavior-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-elevate" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

Ejemplo: contraer al desplazar

Título

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-shrink"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-shrink" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

Ejemplo: contraer y añadir sombra al desplazar

Título

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-scroll-behavior-shrink-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Título</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-shrink-elevate" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

Texto en estado expandido

En barras de aplicaciones superiores con variant="medium" o variant="large" y scroll-behavior="shrink", puedes usar el slot label-large en <mdui-top-app-bar-title> para definir el texto en estado expandido.

Este es el título en estado contraído Este es el título en estado expandido

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-label-large-slot"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>
      Este es el título en estado contraído
      <span slot="label-large">Este es el título en estado expandido</span>
    </mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-label-large-slot" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

`mdui-top-app-bar-title` API

Slots

Nombre
(predeterminado)
Texto del título de la Top App Bar.
`label-large`
Texto del título en estado expandido.

CSS Parts

Nombre
`label`
Texto del título.
`label-large`
Texto del título en estado expandido.

`mdui-top-app-bar` API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Variante de la Top App Bar. Por defecto es `small`. Los valores posibles son: `center-aligned`: Barra de aplicación pequeña, título centrado `small`: Barra de aplicación pequeña `medium`: Barra de aplicación mediana `large`: Barra de aplicación grande
`hide`	`hide`	`boolean`	`false`
Indica si está oculto.
`shrink`	`shrink`	`boolean`	`false`
Indica si la barra se reduce al estilo compacto (`variant="small"`). Solo tiene efecto cuando `variant="medium"` o `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamiento al hacer scroll. Se pueden usar múltiples valores separados por espacios. Los valores posibles son: `hide`: Ocultar al hacer scroll `shrink`: En barras de aplicación medianas y grandes, reducir al estilo de barra pequeña al hacer scroll `elevate`: Agregar sombra al hacer scroll
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Elemento en el que se escuchan los eventos de scroll. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, escucha los eventos de scroll de `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Distancia de desplazamiento necesaria para activar el comportamiento, en `px`.
`order`	`order`	`number`	-
Orden de layout de este componente dentro de `<mdui-layout>`, de menor a mayor. El valor predeterminado es `0`.

Eventos

Nombre
`show`
Se dispara cuando comienza a mostrarse. Se puede evitar que se muestre llamando a `event.preventDefault()`.
`shown`
Se dispara cuando la animación de mostrar se completa.
`hide`
Se dispara cuando comienza a ocultarse. Se puede evitar que se oculte llamando a `event.preventDefault()`.
`hidden`
Se dispara cuando la animación de ocultar se completa.

Slots

Nombre
(predeterminado)
Elementos dentro de la Top App Bar.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--z-index`
Valor CSS `z-index` del componente.

Capítulo anterior

Tooltip Tooltip

Capítulo siguiente

jq Library