MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

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.

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.

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.

mdui-layout-item API

Properties

AttributePropertyReflectTypeDefault
placementplacement'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.
orderordernumber-

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

AttributePropertyReflectTypeDefault
full-heightfullHeightbooleanfalse

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>.

On this page