Layout

I componenti Layout offrono un sistema flessibile di layout a livello di pagina.

Utilizzo

Importa i componenti:

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

Importa i tipi TypeScript:

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

Introduzione:

Il sistema di layout è progettato per essere costruito dall'esterno verso l'interno. Ogni componente layout (<mdui-layout-item>) occupa spazio su uno dei quattro lati (alto, basso, sinistra, destra). I successivi componenti layout riempiono lo spazio rimanente.

I seguenti componenti ereditano da <mdui-layout-item> e possono anche essere utilizzati come componenti layout:

Il componente <mdui-layout-main> occupa lo spazio rimanente, dove puoi posizionare il contenuto della pagina.

Esempi

Ordine dei Componenti Layout

Per impostazione predefinita, i componenti layout occupano lo spazio nell'ordine in cui appaiono nel codice. I seguenti esempi illustrano questo concetto, mostrando diversi ordini per <mdui-top-app-bar> e <mdui-navigation-drawer>.

Mostra questo esempio su uno schermo grande.

Barra superiore dell'app

Principale

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Barra superiore dell'app</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Pannello di navigazione</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

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

Sorgente

Barra superiore dell'app

Principale

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Pannello di navigazione</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Barra superiore dell'app</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

Sorgente

Quando <mdui-top-app-bar> è posizionato prima di <mdui-navigation-drawer>, occupa prima l'intera larghezza dello schermo, lasciando solo l'altezza rimanente per <mdui-navigation-drawer>. Se le loro posizioni sono invertite, <mdui-navigation-drawer> occupa prima l'intera altezza dello schermo, lasciando solo la larghezza rimanente per <mdui-top-app-bar>.

Posizionamento dei Componenti Layout

Usa l'attributo placement per specificare la posizione (alto, basso, sinistra o destra) del componente <mdui-layout-item> nel layout. Per <mdui-navigation-drawer> e <mdui-navigation-rail>, l'attributo placement specifica la loro posizione sinistra o destra.

Nell'esempio seguente, due componenti <mdui-layout-item> sono posizionati su entrambi i lati dell'applicazione.

Barra superiore dell'app

Elemento di layout

Principale

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Barra superiore dell'app</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

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

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

Sorgente

Ordine Personalizzato dei Componenti Layout

Nella maggior parte dei casi, l'ordine dei componenti layout nel codice produrrà il layout desiderato.

Tuttavia, puoi utilizzare l'attributo order per specificare l'ordine di layout. Il sistema dispone i componenti in ordine crescente di valore order. Quando i valori order sono uguali, li dispone nell'ordine in cui appaiono nel codice. L'order predefinito per tutti i componenti layout è 0.

Elemento di layout

Barra superiore dell'app

order="-1"

Principale

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

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Barra superiore dell'app</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">Principale</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>

Sorgente

`mdui-layout-item` API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Posizione del componente. I valori opzionali includono: `top`: in alto `bottom`: in basso `left`: a sinistra `right`: a destra
`order`	`order`	`number`	-
Ordine di layout di questo componente all'interno di `<mdui-layout>`, dal più piccolo al più grande. Il valore predefinito è `0`.

Slots

Nome
(predefinito)
Può contenere qualsiasi contenuto

`mdui-layout-main` API

Slots

Nome
(predefinito)
Può contenere qualsiasi contenuto

`mdui-layout` API

Proprietà

Attributo HTML	Proprietà JavaScript	Reflect	Tipo	Predefinito
`full-height`	`fullHeight`		`boolean`	`false`
Imposta l'altezza del layout corrente al 100%

Slots

Nome
(predefinito)
Può contenere elementi `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`.

Capitolo precedente

Icon

Capitolo successivo

LinearProgress