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> コンポーネントで、残りの領域を占めます。このコンポーネント内にページコンテンツを配置できます。

例

レイアウトコンポーネントの順序

デフォルトでは、レイアウトコンポーネントはコードに出現する順番で領域を占めます。以下の2つの例でこの概念を理解できます。これらの例では、<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 属性を使用してレイアウト内の左右の位置を指定できます。

以下の例では、2つの <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 線形プログレス