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

属性

HTML 属性	JavaScript 属性	类型	默认值
`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

属性

HTML 属性	JavaScript 属性	Reflect	类型	默认值
`full-height`	`fullHeight`		`boolean`	`false`
设置当前布局的高度为 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 线性进度指示器