LayoutUkład

Komponent layoutu zapewnia elastyczny system układu do tworzenia złożonych układów stron.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Wprowadzenie:

System layoutu jest budowany zgodnie z zasadą od zewnątrz do wewnątrz. Każdy komponent layoutu (komponent <mdui-layout-item>) zajmuje miejsce w jednym z czterech kierunków (góra, dół, lewo, prawo), a kolejne komponenty layoutu zajmują miejsce w pozostałej przestrzeni.

Następujące komponenty dziedziczą bezpośrednio z komponentu <mdui-layout-item>, więc mogą być również używane jako komponenty layoutu:

Ostatnią częścią systemu layoutu jest komponent <mdui-layout-main>, który zajmuje pozostałą przestrzeń. W nim możesz umieścić treść strony.

Przykłady

Kolejność komponentów layoutu

Domyślnie komponenty layoutu zajmują miejsce w kolejności, w jakiej pojawiają się w kodzie. Możesz zrozumieć tę koncepcję na podstawie dwóch poniższych przykładów, w których <mdui-top-app-bar> i <mdui-navigation-drawer> występują w różnej kolejności w kodzie.

Proszę obejrzeć ten przykład na dużym monitorze.

Górny pasek aplikacji

Główny

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Górny pasek aplikacji</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Wysuwany panel nawigacyjny</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Główny</mdui-layout-main>
</mdui-layout>

Źródło

Górny pasek aplikacji

Główny

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Wysuwany panel nawigacyjny</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Górny pasek aplikacji</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Główny</mdui-layout-main>
</mdui-layout>

Źródło

Można zauważyć, że gdy <mdui-top-app-bar> jest umieszczony przed <mdui-navigation-drawer>, <mdui-top-app-bar> najpierw zajmuje całą szerokość ekranu, a <mdui-navigation-drawer> może zająć tylko wysokość w pozostałej przestrzeni. Po zamianie kolejności, <mdui-navigation-drawer> najpierw zajmuje całą wysokość ekranu, a <mdui-top-app-bar> zajmuje tylko szerokość w pozostałej przestrzeni.

Pozycja komponentów layoutu

Dla komponentu <mdui-layout-item> możesz użyć atrybutu placement, aby określić jego pozycję w układzie: góra, dół, lewo, prawo. Dla komponentów <mdui-navigation-drawer> i <mdui-navigation-rail> możesz również użyć atrybutu placement, aby określić lewą lub prawą pozycję w układzie.

W poniższym przykładzie umieściliśmy dwa komponenty <mdui-layout-item> po obu stronach aplikacji.

Górny pasek aplikacji

Element layoutu

Główny

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Górny pasek aplikacji</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

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

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Główny</mdui-layout-main>
</mdui-layout>

Źródło

Niestandardowa kolejność komponentów layoutu

W większości przypadków, umieszczenie komponentów layoutu w odpowiedniej kolejności wystarczy, aby uzyskać pożądany układ.

Możesz również użyć atrybutu order, aby określić kolejność układu. System ułoży komponenty według rosnącej wartości order, a w przypadku tej samej wartości order – według kolejności w kodzie. Domyślna wartość order dla wszystkich komponentów layoutu to 0.

Element layoutu

Górny pasek aplikacji

order="-1"

Główny

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

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Górny pasek aplikacji</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">Główny</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>

Źródło

`mdui-layout-item` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Pozycja komponentu. Dozwolone wartości: `top`: U góry `bottom`: Na dole `left`: Po lewej `right`: Po prawej
`order`	`order`	`number`	-
Kolejność tego komponentu w układzie `<mdui-layout>`, sortowana od najmniejszej do największej. Domyślnie `0`.

Slots

Nazwa
(domyślny)
Może zawierać dowolną treść

`mdui-layout-main` API

Slots

Nazwa
(domyślny)
Może zawierać dowolną treść

`mdui-layout` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Reflect	Typ	Domyślne
`full-height`	`fullHeight`		`boolean`	`false`
Ustawia wysokość bieżącego layoutu na 100%

Slots

Nazwa
(domyślny)
Może zawierać elementy `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`

Poprzedni rozdział

Icon Ikona

Następny rozdział

LinearProgress Liniowy wskaźnik postępu