LayoutLayout

Layout ofrece un sistema de diseño flexible para construir páginas complejas.

Uso

Importa los componentes cuando los necesites:

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

Importa los tipos TypeScript cuando los necesites:

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

Introducción:

El sistema de diseño funciona de fuera hacia dentro. Cada componente de diseño (<mdui-layout-item>) ocupa espacio en una de las cuatro direcciones (arriba, abajo, izquierda o derecha), y los siguientes componentes de Layout usan el espacio restante.

Los siguientes componentes heredan directamente de <mdui-layout-item>, por lo que también pueden usarse como componentes de Layout:

La última pieza del sistema de diseño es el componente <mdui-layout-main>, que ocupa el espacio restante. Puedes colocar el contenido de la página dentro de este componente.

Ejemplos

Orden de los componentes de Layout

Por defecto, los componentes de Layout ocupan el espacio en el orden en que aparecen en el código. Puedes entender este concepto con los siguientes dos ejemplos, donde <mdui-top-app-bar> y <mdui-navigation-drawer> aparecen en diferente orden en el código.

Consulta este ejemplo en una pantalla grande.

Top App Bar

Contenido principal

<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">Contenido principal</mdui-layout-main>
</mdui-layout>

Fuente

Top App Bar

Contenido principal

<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">Contenido principal</mdui-layout-main>
</mdui-layout>

Fuente

Observa que cuando <mdui-top-app-bar> se coloca antes de <mdui-navigation-drawer>, <mdui-top-app-bar> ocupa primero todo el ancho de la pantalla, mientras que <mdui-navigation-drawer> solo puede ocupar toda la altura en el espacio restante. Al intercambiar el orden, <mdui-navigation-drawer> ocupa primero toda la altura de la pantalla, y <mdui-top-app-bar> solo puede ocupar todo el ancho en el espacio restante.

Posición de los componentes de Layout

En el componente <mdui-layout-item> puedes usar el atributo placement para indicar su posición dentro del layout (arriba, abajo, izquierda o derecha). Para los componentes <mdui-navigation-drawer> y <mdui-navigation-rail>, también puedes usar el atributo placement para especificar su posición izquierda o derecha.

En el siguiente ejemplo, colocamos dos componentes <mdui-layout-item> en los laterales de la aplicación.

Top App Bar

Elemento de diseño

Contenido principal

<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"
  >Elemento de diseño</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Elemento de diseño</mdui-layout-item>

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

Fuente

Personalizar el orden de los componentes de Layout

En la mayoría de los casos, simplemente colocando los componentes de Layout en orden se logrará el diseño deseado.

También puedes usar el atributo order para especificar el orden de diseño. El sistema organizará los componentes según el valor de order de menor a mayor. Si los order son iguales, se organizan según el orden del código. El order predeterminado de todos los componentes de Layout es 0.

Elemento de diseño

Top App Bar

order="-1"

Contenido principal

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Elemento de diseño</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">Contenido principal</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>

Fuente

`mdui-layout-item` API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Posición del componente. Los valores posibles son: `top`: Superior `bottom`: Inferior `left`: Izquierda `right`: Derecha
`order`	`order`	`number`	-
Orden de layout de este componente dentro de `<mdui-layout>`, de menor a mayor. El valor predeterminado es `0`.

Slots

Nombre
(predeterminado)
Puede contener cualquier contenido.

`mdui-layout-main` API

Slots

Nombre
(predeterminado)
Puede contener cualquier contenido.

`mdui-layout` API

Propiedades

Atributo	Propiedad	Reflect	Tipo	Predeterminado
`full-height`	`fullHeight`		`boolean`	`false`
Establece la altura del Layout al 100%.

Slots

Nombre
(predeterminado)
Puede contener 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 Icono

Capítulo siguiente

LinearProgress Progreso lineal