Layout

Die Layout-Komponente bietet ein flexibles Layout-System zum Erstellen komplexer Seitenlayouts.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

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

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

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

Einführung:

Das Layout-System folgt dem Prinzip von außen nach innen. Jede Layout-Komponente (<mdui-layout-item>) belegt eine der vier Seiten (oben, unten, links, rechts). Die jeweils folgenden Layout-Komponenten nutzen anschließend den verbleibenden Platz.

Die folgenden Komponenten erben direkt von der <mdui-layout-item>-Komponente und können daher auch als Layout-Komponenten verwendet werden:

Die <mdui-layout-main>-Komponente bildet den letzten Teil des Layout-Systems und nimmt den verbleibenden Platz ein. In ihr platzieren Sie den Seiteninhalt.

Beispiele

Reihenfolge der Layout-Komponenten

Standardmäßig nehmen die Layout-Komponenten ihren Platz in der Reihenfolge ein, in der sie im Code erscheinen. Die folgenden zwei Beispiele verdeutlichen dieses Konzept. In diesen Beispielen werden <mdui-top-app-bar> und <mdui-navigation-drawer> in unterschiedlicher Reihenfolge im Code angegeben.

Bitte sehen Sie sich dieses Beispiel auf einem großen Monitor an.

Top App Bar

Hauptbereich

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

Quellcode

Top App Bar

Hauptbereich

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

Quellcode

Sie sehen: Steht <mdui-top-app-bar> vor <mdui-navigation-drawer>, nimmt <mdui-top-app-bar> zuerst die gesamte Breite des Bildschirms ein, während <mdui-navigation-drawer> nur im verbleibenden Platz die gesamte Höhe einnehmen kann. In umgekehrter Reihenfolge nimmt <mdui-navigation-drawer> zuerst die gesamte Höhe des Bildschirms ein, während <mdui-top-app-bar> nur im verbleibenden Platz die gesamte Breite einnehmen kann.

Position der Layout-Komponenten

Für die <mdui-layout-item>-Komponente können Sie das Attribut placement verwenden, um ihre Position oben, unten, links oder rechts im Layout festzulegen. Für die Komponenten <mdui-navigation-drawer> und <mdui-navigation-rail> können Sie das Attribut placement ebenfalls verwenden, um ihre linke oder rechte Position im Layout festzulegen.

Im folgenden Beispiel platzieren wir zwei <mdui-layout-item>-Komponenten auf beiden Seiten der Anwendung.

Top App Bar

Layout-Element

Hauptbereich

<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-Element</mdui-layout-item>

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

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

Quellcode

Benutzerdefinierte Reihenfolge der Layout-Komponenten

In den meisten Fällen können Sie das gewünschte Layout erreichen, indem Sie die Layout-Komponenten in der richtigen Reihenfolge platzieren.

Sie können auch das Attribut order verwenden, um die Layout-Reihenfolge festzulegen. Das System ordnet die Komponenten dann nach aufsteigenden order-Werten. Bei gleichem order wird die Reihenfolge im Code verwendet. Alle Layout-Komponenten haben standardmäßig den order-Wert 0.

Layout-Element

Top App Bar

order="-1"

Hauptbereich

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout-Element</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">Hauptbereich</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>

Quellcode

`mdui-layout-item` API

Eigenschaften

Attribut	Property	Typ	Standard
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Bestimmt, wo die Komponente platziert wird. Mögliche Werte: `top`: Platziert die Komponente oben. `bottom`: Platziert die Komponente unten. `left`: Platziert die Komponente links. `right`: Platziert die Komponente rechts.
`order`	`order`	`number`	-
Gibt die Layout-Reihenfolge innerhalb der `<mdui-layout>`-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist `0`.

Slots

Name
Standard
Kann beliebigen Inhalt enthalten.

`mdui-layout-main` API

Slots

Name
Standard
Kann beliebigen Inhalt enthalten.

`mdui-layout` API

Eigenschaften

Attribut	Property	Reflect	Typ	Standard
`full-height`	`fullHeight`		`boolean`	`false`
Setzt die Layout-Höhe auf 100 %.

Slots

Name
Standard
Kann Elemente wie `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>` und `<mdui-layout-main>` enthalten.

Vorherige Seite

Icon

Nächste Seite

LinearProgress