Layout

Le composant Layout fournit un système de disposition flexible pour créer des structures de page complexes.

Utilisation

Importez les composants :

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

Importez les types TypeScript correspondants :

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

Présentation :

Le système de Layout se construit de l'extérieur vers l'intérieur. Chaque composant de Layout, c'est-à-dire un <mdui-layout-item>, occupe un espace dans l'une des quatre directions (haut, bas, gauche, droite). Les composants suivants occupent l'espace restant.

Les composants suivants héritent directement de <mdui-layout-item> et peuvent donc également être utilisés comme composants de Layout :

La dernière partie du système de Layout est le composant <mdui-layout-main>, qui occupe l'espace restant. Vous pouvez y placer le contenu de votre page.

Exemples

Ordre des composants de Layout

Par défaut, les composants de Layout occupent l'espace dans l'ordre où ils apparaissent dans le code. Ce principe apparaît dans les deux exemples suivants, où l'ordre de <mdui-top-app-bar> et <mdui-navigation-drawer> est inversé.

Veuillez consulter cet exemple sur un écran large.

Top App Bar

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

Source

Top App Bar

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

Source

On voit que lorsque <mdui-top-app-bar> est placé avant <mdui-navigation-drawer>, il occupe d'abord toute la largeur de l'écran, tandis que <mdui-navigation-drawer> n'occupe que la hauteur restante. En inversant l'ordre, on obtient l'effet inverse.

Position des composants de Layout

Pour un composant <mdui-layout-item>, vous pouvez utiliser l'attribut placement pour spécifier sa position (haut, bas, gauche, droite). Pour les composants <mdui-navigation-drawer> et <mdui-navigation-rail>, vous pouvez également utiliser placement pour spécifier la position (gauche ou droite).

Dans l'exemple suivant, nous plaçons deux composants <mdui-layout-item> sur les côtés de l'application.

Top App Bar

Layout Item

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

Source

Personnaliser l'ordre des composants de Layout

Dans la plupart des cas, il suffit de placer les composants dans l'ordre souhaité.

Vous pouvez également utiliser l'attribut order pour spécifier un ordre explicite. Le système trie les composants par order croissant, et en cas d'égalité, par ordre d'apparition dans le code. L'order par défaut est 0.

Layout Item

Top App Bar

order="-1"

Principal

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

Source

`mdui-layout-item` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Position du composant. Les valeurs possibles incluent : `top` : En haut `bottom` : En bas `left` : À gauche `right` : À droite
`order`	`order`	`number`	-
Ordre de ce composant dans le Layout `<mdui-layout>`, trié par ordre croissant. La valeur par défaut est `0`.

Slots

Nom
Défaut
Peut contenir n'importe quel contenu

`mdui-layout-main` API

Slots

Nom
Défaut
Peut contenir n'importe quel contenu

`mdui-layout` API

Propriétés

Attribut HTML	Propriété JavaScript	Reflect	Type	Défaut
`full-height`	`fullHeight`		`boolean`	`false`
Définit la hauteur du Layout actuel à 100%.

Slots

Nom
Défaut
Peut contenir des éléments `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`.

Chapitre précédent

Icon

Chapitre suivant

LinearProgress