BottomAppBarBarra de aplicativo inferior

A barra de aplicativo inferior exibe principalmente itens de navegação e outras operações importantes na parte inferior da página em dispositivos móveis.

Como usar

Importe o componente quando necessário:

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

Importe o tipo TypeScript do componente quando necessário:

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

Exemplo de uso: (Nota: o style="position: relative" no exemplo é apenas para demonstração; remova ao usar em produção.)

<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>

Observações:

Este componente usa position: fixed por padrão e adiciona automaticamente padding-bottom ao body para evitar que o conteúdo da página seja ocultado pelo componente.

No entanto, nos dois casos abaixo, ele usará position: absolute por padrão:

Quando o atributo scroll-target é especificado. Assim, padding-bottom será adicionado ao elemento scroll-target.
Quando está dentro do componente <mdui-layout></mdui-layout>. Assim, nenhum padding-bottom será adicionado.

Exemplos

Dentro de um contêiner especificado

Por padrão, a barra de aplicativo inferior é exibida na parte inferior da página, relativa à janela atual.

Para colocar a barra de aplicativo inferior dentro de um contêiner específico, defina o atributo scroll-target com o valor do seletor CSS ou elemento DOM do contêiner de conteúdo rolável. Assim, a barra de aplicativo inferior será exibida em relação ao elemento pai (você precisa adicionar os estilos position: relative; overflow: hidden ao elemento pai).

Content

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

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

Fonte

Ocultar ao rolar

Defina o atributo scroll-behavior como hide para ocultar a barra de aplicativo inferior ao rolar a página para baixo e exibi-la ao rolar para cima.

Use o atributo scroll-threshold para definir quantos pixels rolar antes de começar a ocultar a barra de aplicativo inferior.

Content

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

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

Fonte

Botão de ação flutuante fixo

Se a barra de aplicativo inferior contém um botão de ação flutuante, você pode adicionar o atributo fab-detach para que, ao rolar a página e a barra de aplicativo inferior for ocultada, o botão de ação flutuante permaneça no canto inferior direito da página.

<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>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`hide`	`hide`	`boolean`	`false`
Define se o componente está oculto.
`fab-detach`	`fabDetach`	`boolean`	`false`
Define se o componente `<mdui-fab>` deve ser desanexado da barra de aplicativo. Se `true`, quando a barra for ocultada, o `<mdui-fab>` ainda permanecerá na página.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento de rolagem. O valor possível é: `hide`: Ocultar ao rolar.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
O elemento no qual o evento de rolagem será monitorado. O valor pode ser um seletor CSS, um elemento DOM ou um objeto JQ. Por padrão, monitora o evento de rolagem da `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
A distância de rolagem, em `px`, necessária para acionar o comportamento.
`order`	`order`	`number`	-
A ordem de layout deste componente dentro do `<mdui-layout>`, em ordem crescente. O valor padrão é `0`.

Eventos

Nome
`show`
Disparado quando o componente começa a ser exibido. Pode impedir a exibição chamando `event.preventDefault()`.
`shown`
Disparado quando a animação de exibição é concluída.
`hide`
Disparado quando o componente começa a ser ocultado. Pode impedir a ocultação chamando `event.preventDefault()`.
`hidden`
Disparado quando a animação de ocultação é concluída.

Slots

Nome
(padrão)
Elementos dentro da barra de aplicativo inferior.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--z-index`
Valor CSS `z-index` do componente.

Capítulo anterior

Badge Badge

Próximo capítulo

Button Botão