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> 在代码中出现的顺序不同。

请在大屏显示器上查看该示例。

可以发现,将 <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> 组件放在了应用的两侧。

自定义布局组件顺序

在大多数情况下,只要按顺序放置布局组件就能实现你想要的布局。

你也可以使用 order 属性来指定布局顺序,系统将按 order 的值从小到大排列组件,order 相同时则按代码顺序排列。所有布局组件的默认 order 都为 0

mdui-layout API

属性

HTML 属性JavaScript 属性Reflect类型默认值
full-heightfullHeightbooleanfalse

设置当前布局的高度为 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> 元素

mdui-layout-item API

属性

HTML 属性JavaScript 属性Reflect类型默认值
placementplacement'top' | 'bottom' | 'left' | 'right''top'

组件的位置。可选值包括:

  • top:上方
  • bottom:下方
  • left:左侧
  • right:右侧
orderordernumber-

该组件在 <mdui-layout> 中的布局顺序,按从小到大排序。默认为 0

Slots

名称
默认

可以包含任意内容

mdui-layout-main API

Slots

名称
默认

可以包含任意内容

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库