LayoutLayout

O componente layout oferece um sistema de layout flexível para criar layouts de página complexos.

Como usar

Importe os componentes quando necessário:

import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';

Importe os tipos TypeScript dos componentes quando necessário:

import type { Layout } from 'mdui/components/layout.js';
import type { LayoutItem } from 'mdui/components/layout-item.js';
import type { LayoutMain } from 'mdui/components/layout-main.js';

Introdução:

O sistema de layout segue o princípio de construção de fora para dentro. Cada componente de layout (componente <mdui-layout-item>) ocupa espaço em uma das quatro direções (cima, baixo, esquerda, direita). Os componentes de layout subsequentes ocupam espaço no espaço restante.

Os seguintes componentes herdam diretamente do componente <mdui-layout-item> e, portanto, também podem ser usados como componentes de layout:

A parte final do sistema de layout é o componente <mdui-layout-main>, que ocupa o espaço restante. Você pode colocar o conteúdo da página dentro deste componente.

Exemplos

Ordem dos componentes de layout

Por padrão, os componentes de layout ocupam espaço na ordem em que aparecem no código. Você pode entender esse conceito pelos dois exemplos abaixo, onde a ordem de <mdui-top-app-bar> e <mdui-navigation-drawer> no código é diferente.

Veja este exemplo em um monitor maior.

Top App Bar

Main

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigation drawer</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>

Fonte

Top App Bar

Main

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigation drawer</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>

Fonte

Observe que, quando <mdui-top-app-bar> é colocado antes de <mdui-navigation-drawer>, <mdui-top-app-bar> ocupará primeiro toda a largura da tela, enquanto <mdui-navigation-drawer> só poderá ocupar a altura no espaço restante. Invertendo a ordem, <mdui-navigation-drawer> ocupará primeiro toda a altura da tela, e <mdui-top-app-bar> só poderá ocupar a largura no espaço restante.

Posição dos componentes de layout

Para o componente <mdui-layout-item>, você pode usar o atributo placement para definir sua posição no layout (cima, baixo, esquerda, direita). Para os componentes <mdui-navigation-drawer> e <mdui-navigation-rail>, você também pode usar o atributo placement para definir sua posição à esquerda ou direita.

No exemplo abaixo, colocamos dois componentes <mdui-layout-item> em ambos os lados do aplicativo.

Top App Bar

Layout Item

Main

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>

Fonte

Ordem personalizada dos componentes de layout

Na maioria dos casos, colocar os componentes de layout em ordem é suficiente para obter o layout desejado.

Você também pode usar o atributo order para definir a ordem de layout. O sistema organizará os componentes em ordem crescente de order. Se order for igual, a ordem do código será usada. O valor padrão de order para todos os componentes de layout é 0.

Layout Item

Top App Bar

order="-1"

Main

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Item</mdui-layout-item>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-checkbox>order="-1"</mdui-checkbox>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Main</mdui-layout-main>
</mdui-layout>

<script>
  const topAppBar = document.querySelector(".example-order mdui-top-app-bar");
  const checkbox = document.querySelector(".example-order mdui-checkbox");

  checkbox.addEventListener("change", (event) => {
    topAppBar.order = event.target.checked ? -1 : 0;
  });
</script>

Fonte

`mdui-layout-item` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Posição do componente. Os valores possíveis são: `top`: Superior. `bottom`: Inferior. `left`: Esquerda. `right`: Direita.
`order`	`order`	`number`	-
A ordem de layout deste componente dentro do `<mdui-layout>`, em ordem crescente. O valor padrão é `0`.

Slots

Nome
(padrão)
Pode conter qualquer conteúdo.

`mdui-layout-main` API

Slots

Nome
(padrão)
Pode conter qualquer conteúdo.

`mdui-layout` API

Propriedades

Atributo	Propriedade	Reflect	Tipo	Padrão
`full-height`	`fullHeight`		`boolean`	`false`
Define a altura do layout como 100%.

Slots

Nome
(padrão)
Pode conter elementos `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`.

Capítulo anterior

Icon Ícone

Próximo capítulo

LinearProgress Indicador de progresso linear