LayoutRozvržení

Rozvržení poskytuje flexibilní systém pro tvorbu složitých rozvržení stránek.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Úvod:

Systém rozvržení se řídí principem z vnějšku dovnitř. Každá komponenta rozvržení (komponenta <mdui-layout-item>) zabírá místo v jednom ze čtyř směrů (nahoře, dole, vlevo, vpravo). Následující komponenty rozvržení pak zabírají místo ve zbývajícím prostoru.

Následující komponenty dědí přímo z komponenty <mdui-layout-item>, a proto je lze také použít jako komponenty rozvržení:

Poslední částí systému rozvržení je komponenta <mdui-layout-main>, která zabírá zbývající prostor. Do této komponenty můžete umístit obsah stránky.

Příklady

Pořadí komponent rozvržení

Ve výchozím nastavení zabírají komponenty rozvržení místo v pořadí, v jakém se objeví v kódu. Tento koncept můžete pochopit z následujících dvou příkladů, kde je pořadí <mdui-top-app-bar> a <mdui-navigation-drawer> v kódu odlišné.

Pro zobrazení tohoto příkladu použijte velkou obrazovku.

Horní aplikační lišta

Hlavní

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Horní aplikační lišta</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Boční navigační panel</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

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

Zdrojový kód

Horní aplikační lišta

Hlavní

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Boční navigační panel</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Horní aplikační lišta</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

Zdrojový kód

Můžete si všimnout, že když je <mdui-top-app-bar> umístěna před <mdui-navigation-drawer>, <mdui-top-app-bar> nejprve zabere celou šířku obrazovky, zatímco <mdui-navigation-drawer> může zabrat pouze výšku ve zbývajícím prostoru. Po prohození pořadí <mdui-navigation-drawer> nejprve zabere celou výšku obrazovky a <mdui-top-app-bar> může zabrat pouze šířku ve zbývajícím prostoru.

Umístění komponent rozvržení

U komponenty <mdui-layout-item> můžete pomocí atributu placement určit její umístění nahoře, dole, vlevo nebo vpravo v rozvržení. U komponent <mdui-navigation-drawer> a <mdui-navigation-rail> můžete také použít atribut placement k určení jejich umístění vlevo nebo vpravo v rozvržení.

V následujícím příkladu jsme umístili dvě komponenty <mdui-layout-item> na obě strany aplikace.

Horní aplikační lišta

Položka rozvržení

Hlavní

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Horní aplikační lišta</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Položka rozvržení</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Položka rozvržení</mdui-layout-item>

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

Zdrojový kód

Vlastní pořadí komponent rozvržení

Ve většině případů stačí umístit komponenty rozvržení v pořadí, abyste dosáhli požadovaného rozvržení.

Lze také použít atribut order k určení pořadí rozvržení. Systém seřadí komponenty podle hodnoty order od nejmenší po největší. Pokud je order stejný, seřadí se podle pořadí v kódu. Výchozí order všech komponent rozvržení je 0.

Položka rozvržení

Horní aplikační lišta

order="-1"

Hlavní

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Položka rozvržení</mdui-layout-item>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Horní aplikační lišta</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">Hlavní</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>

Zdrojový kód

`mdui-layout-item` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Umístění komponenty. Možné hodnoty: `top`: Nahoře. `bottom`: Dole. `left`: Vlevo. `right`: Vpravo.
`order`	`order`	`number`	-
Pořadí této komponenty v rámci rozvržení `<mdui-layout>`. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je `0`.

Slots

Název
(výchozí)
Může obsahovat libovolný obsah.

`mdui-layout-main` API

Slots

Název
(výchozí)
Může obsahovat libovolný obsah.

`mdui-layout` API

Vlastnosti

Atribut	Vlastnost	Reflect	Typ	Výchozí
`full-height`	`fullHeight`		`boolean`	`false`
Nastaví výšku aktuálního rozvržení na 100%.

Slots

Název
(výchozí)
Může obsahovat prvky `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`.

Předchozí kapitola

Icon Ikona

Další kapitola

LinearProgress Lineární indikátor průběhu