MDUI 辅助类
开始使用
获取 MDUI 兼容性 规范 JavaScript 工具库
样式
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
组件
涟漪动画效果 按钮 浮动操作按钮 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
JavaScript 插件
Collapse Headroom
资源
Material 图标

辅助类

边距

这一系列工具类可以为元素添加 margin 和 padding，默认值都是 8px 的倍数。

类名格式为：.mdui-{属性}-{方向}-{大小}

属性：

  • m - 设置 margin
  • p - 设置 padding

方向：

  • t - 设置 margin-top 或 padding-top
  • b - 设置 margin-bottom 或 padding-bottom
  • l - 设置 margin-left 或 padding-left
  • r - 设置 margin-right 或 padding-right
  • x - 设置 margin-leftmargin-right 或 padding-leftpadding-right
  • y - 设置 margin-topmargin-bottom 或 padding-toppadding-bottom
  • a - 设置 margin 或 padding

大小：

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

快速浮动

  • .mdui-float-left 使元素向左浮动
  • .mdui-float-right 使元素向右浮动
Example
float left
float right
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

水平居中

为任意元素添加类 .mdui-center 即可使其水平居中。

Example
mdui-center
<div class="mdui-center" style="width: 200px">mdui-center</div>

垂直居中

为任意元素添加类 .mdui-valign，即可使该元素中的子元素垂直居中。

Example

This should be vertically aligned

<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

水平对齐方式

  • .mdui-text-left 使文本左对齐。
  • .mdui-text-center 使文本居中对齐。
  • .mdui-text-right 使文本右对齐。
Example
This should be left aligned
This should be center aligned
This should be right aligned
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

文本大小写转换

  • .mdui-text-lowercase 把文本转为小写。
  • .mdui-text-uppercase 把文本转为大写。
  • .mdui-text-capitalize 把文本转为单词的首字母大写。
Example

Lowercased text.

Uppercased text.

Capitalized text.

<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

文本自动截断

.mdui-text-truncate 可以在文本长度超出限制时，自动截断，并用省略号代替。

Example

这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。

<p class="mdui-text-truncate" style="max-width: 200px;">这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>

清除浮动

为父元素添加 .mdui-clearfix 类可以清除浮动

Example
mdui-float-left
mdui-float-right
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

隐藏内容

  • .mdui-hidden 类用于隐藏元素，相当于添加样式 display: none;，隐藏后的元素不占据页面空间。
  • .mdui-invisible 类用于使元素不可见，但依然会占据页面上的空间，相当于添加样式 visibility: hidden;。

响应式工具

这些工具类通过媒体查询实现针对不同设备隐藏内容。这些工具类包括：

  • .mdui-hidden-*：在指定宽度的设备上隐藏。
  • .mdui-hidden-*-up：在指定宽度及以上的设备上隐藏。
  • .mdui-hidden-*-down：在指定宽度及以下的设备上隐藏。
超小屏幕
<600px		 小屏幕
>=600px - <1024px		 中等屏幕
>=1024px - <1440px		 大屏幕
>=1440px - <1920px		 超大屏幕
>=1920px
.mdui-hidden-xs 可见 可见 可见 可见
.mdui-hidden-sm 可见 可见 可见 可见
.mdui-hidden-md 可见 可见 可见 可见
.mdui-hidden-lg 可见 可见 可见 可见
.mdui-hidden-xl 可见 可见 可见 可见
.mdui-hidden-xs-down 可见 可见 可见 可见
.mdui-hidden-sm-down 可见 可见 可见
.mdui-hidden-md-down 可见 可见
.mdui-hidden-lg-down 可见
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-up 可见
.mdui-hidden-md-up 可见 可见
.mdui-hidden-lg-up 可见 可见 可见
.mdui-hidden-xl-up 可见 可见 可见 可见

调整浏览器窗口、或在不同设备上查看下面的实例。深色部分表示在当前浏览器窗口中是可见的。

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ mdui-hidden-xs-down
✔ mdui-hidden-sm-down
✔ mdui-hidden-md-down
✔ mdui-hidden-lg-down
✔ mdui-hidden-xl-down
✔ mdui-hidden-xs-up
✔ mdui-hidden-sm-up
✔ mdui-hidden-md-up
✔ mdui-hidden-lg-up
✔ mdui-hidden-xl-up
Previous
媒体
Next
阴影
设置文档主题

主题色

主色

强调色