LayoutLayout

Layout предоставляет гибкую систему компоновки для создания сложных макетов страниц.

Использование

При необходимости импортируйте компоненты:

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

При необходимости импортируйте типы 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';

Введение:

Система компоновки строится по принципу "снаружи внутрь". Каждый компонент компоновки (компонент <mdui-layout-item>) занимает место в одном из четырех направлений (вверх, вниз, влево, вправо), а последующие компоненты компоновки продолжают занимать место в оставшемся пространстве.

Следующие компоненты наследуются от <mdui-layout-item> и поэтому также могут использоваться как компоненты компоновки:

Последняя часть системы компоновки — компонент <mdui-layout-main>, который занимает оставшееся пространство. Внутри этого компонента вы размещаете содержимое страницы.

Примеры

Порядок компонентов компоновки

По умолчанию компоненты компоновки занимают пространство в порядке их появления в коде. Вы можете понять эту концепцию из следующих двух примеров, в которых <mdui-top-app-bar> и <mdui-navigation-drawer> расположены в разном порядке.

Пожалуйста, посмотрите этот пример на большом экране.

Top App Bar

Main

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

Исходный код

Top App Bar

Main

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

Исходный код

Можно заметить, что если разместить <mdui-top-app-bar> перед <mdui-navigation-drawer>, то <mdui-top-app-bar> сначала займет всю ширину страницы, а <mdui-navigation-drawer> сможет занять только высоту в оставшемся пространстве. Если поменять их порядок, то <mdui-navigation-drawer> сначала займет всю высоту страницы, а <mdui-top-app-bar> — только ширину в оставшемся пространстве.

Расположение компонентов компоновки

Для компонента <mdui-layout-item> вы можете использовать атрибут placement, чтобы указать его расположение (вверх, вниз, влево, вправо). Для компонентов <mdui-navigation-drawer> и <mdui-navigation-rail> вы также можете использовать атрибут placement, чтобы указать расположение (влево или вправо).

В следующем примере мы разместили два компонента <mdui-layout-item> по бокам приложения.

Top App Bar

Layout Item

Main

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

Исходный код

Пользовательский порядок компонентов компоновки

В большинстве случаев достаточно расположить компоненты компоновки в нужном порядке.

Вы также можете использовать атрибут order для указания порядка компоновки. Компоненты будут расположены в порядке возрастания значения order; при одинаковом order сохраняется порядок в коде. Значение order по умолчанию для всех компонентов компоновки равно 0.

Layout Item

Top App Bar

order="-1"

Main

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

Исходный код

`mdui-layout-item` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Положение компонента. Возможные значения: `top` — сверху `bottom` — снизу `left` — слева `right` — справа
`order`	`order`	`number`	-
Порядок этого компонента в `<mdui-layout>` (по возрастанию). По умолчанию `0`.

Slots

Название
(по умолчанию)
Любое содержимое.

`mdui-layout-main` API

Slots

Название
(по умолчанию)
Любое содержимое.

`mdui-layout` API

Свойства

Атрибут	Свойство	Reflect	Тип	По умолчанию
`full-height`	`fullHeight`		`boolean`	`false`
Устанавливает высоту Layout равной 100%.

Slots

Название
(по умолчанию)
Может содержать элементы `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>`.

Предыдущая глава

Icon Иконка

Следующая глава

LinearProgress Линейный индикатор прогресса