BottomAppBarBottom App Bar

El componente Bottom App Bar se usa para mostrar acciones importantes y elementos de navegación en la parte inferior de la página en dispositivos móviles.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/bottom-app-bar.js';

Importa el tipo TypeScript cuando lo necesites:

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

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

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

Notas importantes:

Este componente usa position: fixed por defecto y añade automáticamente padding-bottom 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-bottom al elemento scroll-target.
Cuando está dentro del componente <mdui-layout></mdui-layout>. En este caso, no se añade padding-bottom.

Ejemplos

Dentro de un contenedor especificado

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

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

Contenido

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">Contenido</mdui-bottom-app-bar>

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

Fuente

Ocultar al desplazar

Usa el atributo scroll-behavior="hide" para ocultar la barra de aplicaciones inferior al desplazarte hacia abajo y volver a mostrarla al desplazarte hacia arriba.

El atributo scroll-threshold define cuántos píxeles desplazar antes de comenzar a ocultar la barra de aplicaciones inferior.

Contenido

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Contenido</mdui-bottom-app-bar>

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

Fuente

Floating Action Button fijo

Si la barra de aplicaciones inferior contiene un Floating Action Button, puedes añadir el atributo fab-detach para que, al desplazar la página y ocultar la barra de aplicaciones inferior, el Floating Action Button permanezca en la esquina inferior derecha.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`hide`	`hide`	`boolean`	`false`
Indica si está oculto.
`fab-detach`	`fabDetach`	`boolean`	`false`
Indica si el `<mdui-fab>` dentro del Bottom App Bar debe separarse de la barra. Si es `true`, cuando el Bottom App Bar se oculta, el `<mdui-fab>` permanecerá en la página.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamiento al hacer scroll. Los valores posibles son: `hide`: Ocultar 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 del Bottom 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

Badge Badge

Capítulo siguiente

Button Botón