Layout

Layout components provide a flexible system for page-level layout.

Usage

Import the component:

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

Import the TypeScript type:

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

Introduction:

The layout system is designed to be built from the outside in. Each layout component (<mdui-layout-item>) occupies space on one of the four sides (top, bottom, left, right). Subsequent layout components fill the remaining space.

The following components inherit from <mdui-layout-item> and can also be used as layout components:

The <mdui-layout-main> component occupies the remaining space, where you can place page content.

Examples

Layout Component Order

By default, layout components take up space in the order they appear in the code. The following examples show how order affects <mdui-top-app-bar> and <mdui-navigation-drawer>.

View this example on a large screen.

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>

Source

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>

Source

When <mdui-top-app-bar> appears before <mdui-navigation-drawer>, it takes the full screen width, leaving only the remaining height for <mdui-navigation-drawer>. If you swap the order, <mdui-navigation-drawer> takes the full screen height first, leaving only the remaining width for <mdui-top-app-bar>.

Layout Component Placement

Use the placement attribute to specify the position (top, bottom, left, or right) of the <mdui-layout-item> component in the layout. For <mdui-navigation-drawer> and <mdui-navigation-rail>, the placement attribute specifies their left or right position.

In the following example, two <mdui-layout-item> components are placed on both sides of the application.

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>

Source

Custom Layout Component Order

In most cases, the order of layout components in the code will achieve the desired layout.

However, you can use the order attribute to specify the layout order. Layout components are ordered by ascending order value. When order values are the same, source order is used. The default order for all layout components is 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>

Source

`mdui-layout-item` API

Properties

Attribute	Property	Type	Default
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Determines where the component is placed. Possible values: `top`: Places the component at the top. `bottom`: Places the component at the bottom. `left`: Places the component on the left. `right`: Places the component on the right.
`order`	`order`	`number`	-
Specifies the layout order within the `<mdui-layout>` component. Items are sorted in ascending order. The default value is `0`.

Slots

Name
(default)
Can contain any content.

`mdui-layout-main` API

Slots

Name
(default)
Can contain any content.

`mdui-layout` API

Properties

Attribute	Property	Reflect	Type	Default
`full-height`	`fullHeight`		`boolean`	`false`
Sets the layout height to 100%.

Slots

Name
(default)
Can contain elements such as `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, and `<mdui-layout-main>`.

Icon

LinearProgress