TopAppBarBarra de aplicativo superior

A barra de aplicativo superior é usada para exibir informações e ações relacionadas no topo da página, fornecendo navegação clara e acesso conveniente às funcionalidades.

Como usar

Importe os componentes conforme necessário:

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

Importe os tipos TypeScript dos componentes conforme necessário:

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

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

Title

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

Observações:

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

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

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

Exemplos

Dentro de um contêiner especificado

Por padrão, a barra de aplicativo superior é exibida no topo da página, em relação à janela atual.

Se você deseja colocar a barra de aplicativo superior dentro de um contêiner especificado, defina o atributo scroll-target no componente <mdui-top-app-bar>. O valor deve ser o seletor CSS ou elemento DOM do contêiner de conteúdo rolável. Assim, a barra de aplicativo superior será exibida em relação no elemento pai (você precisa adicionar os estilos position: relative; overflow: hidden no elemento pai).

Title

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Title</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>

Fonte

Forma

Use o atributo variant no componente <mdui-top-app-bar> para definir a forma da barra de aplicativo superior.

Title

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

Fonte

Comportamento ao rolar a página

Definindo o atributo scroll-behavior no componente <mdui-top-app-bar>, você pode definir o comportamento da barra de aplicativo superior ao rolar a página. Você pode definir vários comportamentos separando-os por espaços.

Os comportamentos de rolagem incluem:

hide: Oculta a barra de aplicativo superior ao rolar a página para baixo e a exibe ao rolar para cima.
shrink: Apenas efetivo quando o atributo variant é medium ou large. Expande a barra de aplicativo superior ao rolar para baixo e a contrai ao rolar para cima.
elevate: Adiciona sombra à barra de aplicativo superior ao rolar a página para baixo; remove a sombra quando a página volta ao topo.

Use o atributo scroll-threshold para definir quantos pixels rolar antes de começar a acionar o comportamento da barra de aplicativo superior. (Observe que, para uma resposta rápida, ao usar o comportamento elevate, não defina o atributo scroll-threshold.)

Exemplo: Ocultar ao rolar

Title

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

Fonte

Exemplo: Adicionar sombra ao rolar

Title

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

Fonte

Exemplo: Contrair ao rolar

Title

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

Fonte

Exemplo: Contrair e adicionar sombra ao rolar

Title

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

Fonte

Texto no estado expandido

Para barras de aplicativo superior com variant medium ou large e scroll-behavior shrink, você pode adicionar o slot label-large no componente <mdui-top-app-bar-title> para definir o texto no estado expandido.

Este é o título no estado recolhido Este é o título no 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 é o título no estado recolhido
      <span slot="label-large">Este é o título no 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>

Fonte

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

Slots

Nome
(padrão)
Texto do título da barra de aplicativo superior.
`label-large`
Texto do título no estado expandido.

CSS Parts

Nome
`label`
Texto do título.
`label-large`
Texto do título no estado expandido.

`mdui-top-app-bar` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Forma da barra de aplicativo superior. O padrão é `small`. Os valores possíveis são: `center-aligned`: Barra de aplicativo pequena, com título centralizado. `small`: Barra de aplicativo pequena. `medium`: Barra de aplicativo média. `large`: Barra de aplicativo grande.
`hide`	`hide`	`boolean`	`false`
Define se o componente está oculto.
`shrink`	`shrink`	`boolean`	`false`
Define se deve reduzir para o estilo `variant="small"`. Só é válido quando `variant="medium"` ou `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento de rolagem. Pode usar vários valores separados por espaço. Os valores possíveis são: `hide`: Ocultar ao rolar. `shrink`: Em barras de aplicativo médias e grandes, reduz ao estilo de barra pequena ao rolar. `elevate`: Adiciona sombra 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 superior.

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

Tooltip Tooltip

Próximo capítulo

Biblioteca de utilitários jq