MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
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 顶部应用栏
工具函数
独立包

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-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-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> 元素

本页目录