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 built from the outside in. Each layout component (<mdui-layout-item>) occupies space in one of the four directions (top, bottom, left, right). Subsequent layout components continue to occupy 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 occupy space in the order they appear in the code. The following examples illustrate this concept, showing different orders for <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>

Code

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>

Code

When <mdui-top-app-bar> is placed before <mdui-navigation-drawer>, it occupies the full screen width first, leaving only the remaining height for <mdui-navigation-drawer>. If their positions are swapped, <mdui-navigation-drawer> occupies 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>

Code

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. The system arranges the components in ascending order of order value. When order values are the same, it arranges them in the order they appear in the code. 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>

Code

`mdui-layout-item` API

Properties

Attribute	Property	Type	Default
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Determines the component's position. Possible values: `top`: Positions the component at the top. `bottom`: Positions the component at the bottom. `left`: Positions the component on the left. `right`: Positions 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 contains any content.

`mdui-layout-main` API

Slots

Name
(default)
Can contains 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>`.

TopAppBar

Up Next

JavaScript Library