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 線性進度條